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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
基于Python函数和变量名解析
2019/07/19 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
大学毕业感言
2014/01/10 职场文书
十八大闭幕感言
2014/01/22 职场文书
教育技术职业规划范文
2014/03/04 职场文书
《春雨》教学反思
2014/04/24 职场文书
旷课检讨书范文
2014/10/30 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
经营目标责任书
2015/05/08 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Python数据结构之队列详解
2022/03/21 Python