JS事件流和事件委托

时间  2019-11-17
标签 事件 委托 栏目 JavaScript 繁體版
原文   原文链接

在上一篇《JS知识点大杂烩》中说到了事件流但没有详细的介绍，这篇文章就来介绍一下事件流。bash

事件流一共由三个阶段分别是：闭包

1.捕获阶段
2.目标阶段
3.冒泡阶段
复制代码

事件绑定你们都知道，有DOM0级（on+type）和DOM2级（addEventListener）,我以为说那么多概念很差理解，直接看代码吧,为了方便我就直接使用id来获取元素。ui

  • DOM0级
<div id="box1"></div>
box1.onclick = function(){
	console.log('box1');
}
复制代码

输出了box1这个咱们都知道，再来看一下。this

<div id="box1"></div>
box1.onclick = function(){
	console.log('box1');
}
box1.onclick = function(){
	console.log('box1 two');
}
复制代码

输出了box1 two,由于DOM0级会覆盖掉以前在同一元素上面的绑定，再来看一下。spa

<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冒泡）。 咱们再来看看捕获阶段是怎么样的3d

<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看到 代理

你可能会发现顺序反过来了，那这是为何呢？由于 事件捕获，那什么是时间捕获呢？概念请自行百度，直接上图。

这就是捕获阶段，跟冒泡阶段彻底相反。

那冒泡跟捕获的执行顺序是什么样的呢？我分别在每个元素上绑定了两个阶段的同一事件，咱们来看看触发的顺序。code

<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看到，先捕获后冒泡。 cdn

那是否是都这样呢？咱们稍微改动一下。 

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中该事件是先绑定的后输出。IE六、七、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){ //IE
		event.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)
复制代码

IE六、七、8，事件绑定的this指向 

box1.attachEvent('onclick',function () {
	console.log('attachEvent', this);
})
复制代码

attachEvent [object Window]

咱们发现，IE六、七、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);
}
复制代码

这就是事件委托。

  • 优势：
    • 能够大量节省内存占用，减小事件注册。
    • 能够实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤其合适
  • 缺点：
    • 事件代理的经常使用应用应该仅限于上述需求，若是把全部事件都用事件代理，可能会出现事件误判。即本不应被触发的事件被绑定上了事件。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程