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 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
angularjs性能优化的方法
Sep 05 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 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
PHP环境搭建最新方法
2006/09/05 PHP
福利彩票幸运号码自动生成器
2006/10/09 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
vue实现文字加密功能
2019/09/27 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python Flask基础教程示例代码
2018/02/07 Python
python将字符串转换成json的方法小结
2019/07/09 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python 等差数列末项计算方式
2020/05/03 Python
Python如何实现邮件功能
2020/05/27 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
工商局个人工作总结
2015/03/03 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs