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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
js切换div css注意的细节
Dec 10 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 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
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
浅析python中的分片与截断序列
2016/08/09 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python实现flappy bird小游戏
2018/12/24 Python
python文件读取失败怎么处理
2020/06/23 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
大学生职业生涯规划书前言
2014/01/09 职场文书
前台文员职责范本
2014/03/07 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
微信小程序基础教程之echart的使用
2021/06/01 Javascript
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技