js事件冒泡与事件捕获详解


Posted in Javascript onFebruary 20, 2017

(一)事件绑定

1.普通事件绑定

给html添加一个以on开头的特定的属性(如onclick,onfocus);

<button id="A" onclick="alert(this.id)">方式一</button>

<button id="A" onclick="handler(this)">方式二</button>
<script>
 function handler(btn){
 alert(this.id); //undefined this指向window对象
 alert(btn.id); //A 
 }
</script>
<button id="A">方式三</button>
<script>
 var btn = document.getElementById("A");
 btn.onclick = function(){
 alert("1:"+this.id);
 }
 btn.onclick = function(){
 alert("2:"+this.id);
 }
 //只能绑定一个事件处理函数,后面的会覆盖前面的;
</script>

2.符合W3C标准的事件绑定(addEventListener和removeEventListener)

target.addEventListener(type, listener[, useCapture]);

type:必须,表示监听事件类型的字符串;

listener:必须,当所监听的事件类型触发时,会接收到一个事件通知对象;listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数;

useCapture:可选,Boolean,默认为false,表示事件传播方式为事件冒泡;true,表示事件传播方式为事件捕获;

(事件捕获与事件冒泡下面有讲到)

这两个函数Firefox和Chrome都支持,IE9及以后也支持这两个函数;IE使用attachEvent/detachEvent来进行事件绑定和取消;

<button id="B">W3C标准一</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B this指向的是dom对象; attachEvent指向的是window对象
 }
</script>
<button id="B">W3C标准二</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,true);
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B
 }
 //当点击按钮时,函数handler会执行2次,一次为事件捕获,一次为事件冒泡;
 //如果绑定的是同一个事件处理函数,且都是事件捕获或都是事件冒泡,那么只能绑定一次;
</script>

3.IE浏览器使用attachEvent/detachEvent进行事件绑定与取消

<button id="C">IE</button>
<script>
 var btn = document.getElementById("C");
 btn.attachEvent("click",handler);
 function handler(){
 alert(this.id); //undifined this指向的是window对象; addEventListener指向的是dom对象
 }
</script>

注:同一个事件处理函数只能绑定一次;不同的函数对象可以重复绑定不会覆盖;匿名函数和匿名函数即使代码完全一样,也是互相不相同的;

(二)事件捕获与事件冒泡

<div id="A">
 <div id="B">
 <div id="C"></div>
 </div>
</div>

事件捕获:就是从最外层到目标对象的顺序触发(如上面的代码,如果点击C,它的触发顺序为A→B→C)

事件冒泡:就是从目标对象到外层的顺序触发(如果点击C,它的触发顺序为C→B→A)

DOM事件流:就是支持两种事件模型,捕获型事件和冒泡型事件,捕获型事件先发生;两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

图片来自网络:

js事件冒泡与事件捕获详解

<div id="A" style="width:300px; height:300px; background:red;position:relative;">
 <div id="B" style="width:200px;height:200px; background:green;position:relative;top:50px;margin:auto;">
 <div id="C" style="width:100px;height:100px; background:blue;position:relative;top:50px;margin:auto;"></div> 
 </div>
</div>
<script>
 var A = document.getElementById("A"); 
 var B = document.getElementById("B"); 
 var C = document.getElementById("C"); 
 // 目标(目标阶段的处理函数,先注册先执行)
 C.addEventListener('click',function(){alert("Ct");},true);
 C.addEventListener('click',function(){alert("Cf");},false);
 // 事件冒泡
 A.addEventListener('click',function(){alert("Af");},false);
 B.addEventListener('click',function(){alert("Bf");},false);
 // 事件捕获
 A.addEventListener('click',function(){alert("At");},true);
 B.addEventListener('click',function(){alert("Bt");},true); 
</script>
//当点击C时(蓝色),输出At Bt Ct Cf Bf Af

阻止事件的传播:

• 在W3c中,使用stopPropagation()方法

• 在IE下设置cancelBubble = true;

阻止事件的默认行为:

• 在W3c中,使用preventDefault()方法;

• 在IE下设置window.event.returnValue = false;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
关于js datetime的那点事
Nov 15 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
JS批量替换内容中关键词为超链接
Feb 20 #Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 #Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 #Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 #Javascript
Bootstrap table右键功能实现方法
Feb 20 #Javascript
You might like
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
javascript 函数式编程
2007/08/16 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
JQuery小知识
2010/10/15 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
vue中appear的用法
2017/08/17 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
年终自我鉴定
2013/10/09 职场文书
大学生大二自我鉴定
2013/10/28 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
2014年班务工作总结
2014/12/02 职场文书
小学教代会开幕词
2016/03/04 职场文书