JS事件流和事件委托
在上一篇《JS知识点大杂烩》中说到了事件流但没有详细的介绍,这篇文章就来介绍一下事件流。
事件流一共由三个阶段分别是:
1.捕获阶段
2.目标阶段
3.冒泡阶段
复制代码
事件绑定大家都知道,有DOM0级(on+type)和DOM2级(addEventListener),我觉得说那么多概念不好理解,直接看代码吧,为了方便我就直接使用id来获取元素。
- DOM0级
<div id="box1"></div>
box1.onclick = function(){console.log('box1');
}
复制代码
输出了box1
这个我们都知道,再来看一下。
<div id="box1"></div>
box1.onclick = function(){console.log('box1');
}
box1.onclick = function(){console.log('box1 two');
}
复制代码
输出了box1 two
,因为DOM0级会覆盖掉之前在同一元素上面的绑定,再来看一下。
<div id="box1"><div id="box2"><div id="box3"></div></div>
</div>
box1.onclick = function(){console.log('box1');
}
box2.onclick = function(){console.log('box2');
}
box3.onclick = function(){console.log('box3');
}
复制代码
当我们点击box1时都知道输出box1,可是当我们点击box3时弹出什么呢?你可能会感觉奇怪,为什么我点击的box3怎么其他的也会触发?因为事件冒泡。那什么是事件冒泡呢?概念请自行百度,直接上图。这就叫做事件冒泡,一级一级往上冒直到window这里我没有画出来。DOM0级只支持冒泡阶段。
- DOM2级
<div id="box1"><div id="box2"><div id="box3"></div></div>
</div>
box1.addEventListener('click', function(){console.log('box1');
},false);
box2.addEventListener('click', function(){console.log('box2');
},false);
box3.addEventListener('click', function(){console.log('box3');
},false);
复制代码
输出跟上面是一样的,因为我们绑定在了冒泡阶段。(true捕获,false冒泡)。 我们再来看看捕获阶段是怎么样的
<div id="box1"><div id="box2"><div id="box3"></div></div>
</div>
box1.addEventListener('click', function(){console.log('box1');
},true);
box2.addEventListener('click', function(){console.log('box2');
},true);
box3.addEventListener('click', function(){console.log('box3');
},true);
复制代码
我们点击box3看到
你可能会发现顺序反过来了,那这是为什么呢?因为事件捕获,那什么是时间捕获呢?概念请自行百度,直接上图。这就是捕获阶段,跟冒泡阶段完全相反。
那冒泡跟捕获的执行顺序是什么样的呢?我分别在每一个元素上绑定了两个阶段的同一事件,我们来看看触发的顺序。
<div id="box1"><div id="box2"><div id="box3"></div></div>
</div>
box1.addEventListener('click', function(){console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){console.log('box2 捕获阶段');
},true);
box3.addEventListener('click', function(){console.log('box3 捕获阶段');
},true);
box1.addEventListener('click', function(){console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 冒泡阶段');
},false);
复制代码
我们点击box3看到,先捕获后冒泡。
那是不是都这样呢?我们稍微改动一下。
box1.addEventListener('click', function(){console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){console.log('box2 捕获阶段');
},true);
box1.addEventListener('click', function(){console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 捕获阶段');
},true); // 将box3的捕获阶段放到box3的冒泡阶段后面
复制代码
看看触发的顺序是不是还一样呢?
发现反过来了,其实这就叫做目标阶段吧。在你触发事件的目标元素身上不区分冒泡捕获,按绑定的顺序来执行。
我们用图来看一下。
这样是不是太简单我们来一点复杂的。
<div id="box1"><div id="box2"><div id="box3"></div></div>
</div>
box1.addEventListener('click', function(){console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){console.log('box2 捕获阶段');
},true);
box3.addEventListener('click', function(){console.log('box3 捕获阶段');
},true);
box1.addEventListener('click', function(){console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 冒泡阶段');
},false);
box1.onclick = function () {console.log('box1 51561');
}
box2.onclick = function () {console.log('box2');
}
box3.onclick = function () {console.log('box3');
}
box1.onclick = function () {console.log('box1');
}
复制代码
触发顺序是什么样的?(我觉得你最好先自己把答案写出来)
看看你答对了没有
这样会不会太简单,换一下顺序
box1.onclick = function () {console.log('box1 51561');
}
box2.onclick = function () {console.log('box2');
}
box3.onclick = function () {console.log('box3');
}
box1.onclick = function () {console.log('box1');
}
box1.addEventListener('click', function(){console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){console.log('box2 捕获阶段');
},true);
box1.addEventListener('click', function(){console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 捕获阶段');
},true);
复制代码
答对了吗?
- 再说一下冒泡和捕获
<div id="box1"><div id="box2"><div id="box3"></div></div>
</div>
box1.onclick = function () {console.log('box1 51561');
}
box2.onclick = function () {console.log('box2');
}
box3.onclick = function () {console.log('box3');
}
box1.onclick = function () {console.log('box1');
}
box1.addEventListener('click', function(){console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){console.log('box2 捕获阶段');
},true);
box1.addEventListener('click', function(){console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 冒泡阶段');
},false);
box3.addEventListener('click', function(){console.log('box3 捕获阶段');
},true);
复制代码
你说这样点击会输出什么?你是不是犹豫了?说明你还是不懂冒泡和捕获。
不要让你看到的骗了你,冒泡是DOM结构的父子关系而不是看起来是不是包裹的关系。(答案同上面)。
- 忘了IE了,说一下IE的事件机制。
IE上面不支持addEventListener但是它有attachEvent
box1.onclick = function () {console.log('box1 51561');
}
box2.onclick = function () {console.log('box2');
}
box3.onclick = function () {console.log('box3');
}
box1.onclick = function () {console.log('box1');
}
box1.attachEvent('onclick', function (){console.log('box1 attachEvent')
})
box2.attachEvent('onclick', function (){console.log('box2 attachEvent')
})
box3.attachEvent('onclick', function (){console.log('box3 attachEvent')
})
复制代码
box1.attachEvent('onclick', function (){console.log('box1')
})
box1.attachEvent('onclick', function (){console.log('box2')
})
box1.attachEvent('onclick', function (){console.log('box3')
})
复制代码
这个会输出什么?(提示:不会覆盖) 答案是:box1 box2 box3 哈哈,开玩笑啊。
是不是很奇怪,IE中该事件是先绑定的后输出。IE6、7、8,不支持事件捕获只支持事件冒泡。
- 阻止事件冒泡兼容
我们先来说一下不支持冒泡的事件:blur、focus、mouseenter、mouseleave。(我就知道这些) 还是这个例子,我们看一下阻止冒泡。
box1.onclick = function (){console.log('box1')
}
box2.onclick = function (){console.log('box2')
}
box3.onclick = function (e){e.stopPropagation();console.log('box3')
}
复制代码
只输出了box3. 虽然阻止了冒泡但在IE8及以下是不好使的,我们看一下兼容的写法。
function stopPropagate(e){var event = e || window.event;if(event.stopPropagation){event.stopPropagation();}else if(event.cancelBubble){ //IEevent.cancelBubble = true;}
}
复制代码
阻止默认事件兼容
function preventDef(e){var g = e || window.event;if(g.preventDefault){g.preventDefault();}else if(g.returnValue){g.returnValue = false;}return false;
}
复制代码
我们再来看看事件绑定的this指向
box1.onclick = function (){console.log('onclick', this);
}
box1.addEventListener('click',function () {console.log('addEventListener', this);
}, false)
复制代码
IE6、7、8,事件绑定的this指向
box1.attachEvent('onclick',function () {console.log('attachEvent', this);
})
复制代码
attachEvent [object Window]
我们发现,IE6、7、8 this指向window
- 扩展 事件委托
<ul id="ul"><li>1</li><li>2</li><li>3</li>
</ul>
复制代码
如果我们要监听每一个li的行为,你会不会这么做。
let li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {li.onclick = ()=>{console.log(i);}
}
复制代码
评论区有位大佬指出了我的错误,因为这样形成了闭包,得不到输出的结果。因为当时只想演示事件委托没有注意到这个情况,在此为读者们表示深深的歉意。下面是更改之后的,之所以不把错误的修改是想告诫自己还有和我犯同样错误的人。
let li = document.getElementsByTagName("li");
//ES6
for (let i = 0; i < li.length; i++) {li[i].onclick = ()=>{console.log(i);}
}
//IIFE(1)
for (var i = 0; i < li.length; i++) {(function(j){li[j].onclick = ()=>{console.log(j);}})(i)
}
//IIFE(2)
for (var i = 0; i < li.length; i++) {li[i].onclick = (function(j){return ()=>{console.log(j);}})(i);
}
复制代码
这样做是对的单不够好,要是再加几个li或有很多的100|1000个li你还这样做是不是感觉就不好了。我们就需要为每一个li注册事件,麻烦不说,注册很多事件就不好。那么我们怎么办的,使用事件委托,就是把你的事件委托给别人(父级),利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
我们来看一下。
ul.onclick = function (e){console.log(e.target);
}
复制代码
这就是事件委托。
- 优点:
- 可以大量节省内存占用,减少事件注册。
- 可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适
- 缺点:
- 事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。
转载于:https://juejin.im/post/5c1752326fb9a049bd4234e2
JS事件流和事件委托相关推荐
- 第三天:js中的事件提高篇(事件流,事件对象,事件委托深层次理解)
目录 前言 一,基础部分 1.1 js监听并绑定事件 1.2 删除事件绑定 二,事件流 2.1 事件流是什么 2.2 事件流模型 2.3 捕获与冒泡具体示例 2.3.1 addEventListene ...
- 13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录 一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
- 后处理程序文件大小的变量_【每日一题】(17题)面试官问:JS中事件流,事件处理程序,事件对象的理解?...
关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤 风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
- js事件流、事件代理等
菜菜的自己发现真的啥都不太懂 - 虽然啥都会一点,但是却什么都不精通. 偶然看见js事件流和事件代理等 - 黑人问号脸,虽然在实际写代码的时候经常用到. 做个总结: 都是学的别人的. 事件代理:通过将 ...
- 事件对象,事件流(事件冒泡和事件捕获)、事件委托、L0和L2注册等相关概念及用法
事件对象 1. 事件对象是什么? 这个对象包含事件触发时的相关信息.如:鼠标点击事件中,事件对象就存了鼠标点击时的位置信息等. 2. 事件对象在哪里? 在事件绑定的回调函数的第一个参数就是事件对象,一 ...
- js 事件流的事件冒泡和事件捕获与阻止事件传播
为了方便引入事件流的概念,我们先来说说什么是事件. 事件就是用户或浏览器自身执行的某种动作.换句话说,我们在浏览网页或者 APP 时,通常会在设备上产生很多交互性的操作,例如点击.选择.滚动屏幕.键盘 ...
- 面试题7:Js事件流,事件冒泡(IE事件流)
事件流 在第四代 Web 浏览器(IE4 和 Netscape Communicator 4)开始开发时,开发团队碰到了一个有意思的问题:页面哪个部分拥有特定的事件呢?要理解这个问题,可以在一张纸上画 ...
- addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡
当一个HTML元素触发一个事件时,该事件会在元素结点与根结点之间的路径传播.传播按顺序分为三个阶段:捕获阶段.目标阶段.冒泡阶段,这个传播过程就是 DOM 事件流. 事件冒泡就是当一个HTML元素出发 ...
- JavaScript 中的事件流和事件处理程序(读书笔记思维导图)
JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...
最新文章
- 访谈计算机操作管理协会(Afcom)首席执行官Jill Eckhaus:数据中心问题出现在何处?...
- 在Linux上安装Python 3
- JS详细入门教程(上)
- python 变量名重新赋值 变量重新赋值 通过字典的方式
- Java洛谷P1149 火柴棒等式
- 信息系统项目管理师:第8章:项目质量管理-章节真题+解析
- 如何更换outlook邮件的背景色
- Adobe (Acrobat)Reader 6.0以上版本支持对有特殊权限的PDF进行添加注释,填写标单以及保存的功能。...
- Uncontrolled memory mapping in camera driver (CVE-2013-2595)
- MySQL数据库常见的几个问题
- 踩不出足迹(牛客练习赛88 )
- UIBarbuttonItem
- python变量名称的规定_Python 趣闻:如何获得变量的名字?
- 转载《OpenGIS: Open Geodata Interoperation Specification》中文翻译
- java .class 实例对象_Java产生Class类的三种实例化对象的方法
- 博客园博客使用无觅插件
- 计算机专业基础英语,计算机专业基础英语1.ppt
- 2021-05-14 linux下用root 登录ftp连接
- 人工智能发展到GPT4经历了什么,从专家系统到机器学习再到深度学习,从大模型到现在的GPT4
- 微信公众平台找自己APPID
热门文章
- JSP第六次课:数据库访问显示商品信息
- Hibernate各种主键生成策略与配置详解 - 真的很详细啊!!
- solr4.1 DataImport MYSQL批量导入
- .NET一个线程更新另一个线程的UI(两种实现方法及若干简化)
- WdOS系统上samba服务的基本配置
- python简单操作题_Python简单练习题可以一起做做
- PAT 乙级 1041 考试座位号
- 匿名内部类的简单使用
- pod出现include of non-modular header inside framework module 错误
- 【vuejs小项目】一、脚手架搭建工作