引言
今天上课的时候有点困了，于是打开手机看看前端的零散小文章，突然看到了“事件委托”这个名词，嘤嘤嘤？
于是我决定把找dom事件稍微梳理一下，可能不是很全面，因为有些实在是不怎么常用，我也记不太住，以后需要用的时候就去查一查，然后再补充进来吧嘿嘿嘿！！
主要内容
首先我梳理一下我今天整理的主要内容，主要为事件冒泡、事件捕获还有事件委托。
正式开始啦
什么是事件流？
流的概念现今的JavaScript中随处可见，比图react中的单向数据流、node中的流、还有我们的dom时间流：用术语说流是对输入输出设备的抽象。以程序的角度来说，流是具有方向的数据。
事件流的事件冒泡和事件捕获
想想一张纸上有一组半径不等的同心圆，如果我把手指放在圆心上，那么手指指向的其实不是一个圆，而是纸上所有的圆，当我们点击其中的一个圆，那我们就同时点击了所有的父元素。
提问：点击按钮时，是最外层的父元素先收到事件并执行，还是具体元素先收到事件并执行？
回答：有两种观点，事件冒泡和事件捕获。
事件冒泡
事件冒泡也就是时间开始的时候有最具体的元素接收（也就是事件发生所在的结点），然后逐级传播到较为不具体的结点。
举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling</title>
</head>
<body>
<button id="clickMe">Click Me</button>
</body>
</html>
给button以及它的父元素加入点击事件。
var button = document.getElementById('clickMe');
button.onclick = function() {
console.log('1. You click Button');
};
document.body.onclick = function() {
console.log('2. You click body');
};
document.onclick = function() {
console.log('3. You click document');
};
window.onclick = function() {
console.log('4. You click window');
};
效果就是这样：
我们可以看出当我们点击了button之后整个点击事件的传播顺序是button→body→document→window
click事件首先再button元素上面发生，然后逐级向上传播，这就是事件冒泡。
事件捕获
说完了事件冒泡，应该很简单就是像泡泡一样biubiubiu上去。我们来看看事件捕获
事件捕获，它认为事件发生的时候，父元素应该更早地接收到事件，具体元素则最后接收到事件，如果是我们刚才的demo，那么事件地发生顺序应该是window→document→body→ button。
现在事件冒泡方式更胜一筹
DOM事件流
说了那么多，我们现在来整合一下我们的DOM事件流，主要分为三个阶段：
- 事件捕获阶段
- 处理目标阶段
- 事件冒泡阶段
- 事件捕获阶段
当事件发生时，首先发生的是事件捕获，为父元素截获事件提供了机会。
我们可以把上面的demo，window点击事件改为使用事件捕获模式（addEventListener最后一个参数， 为true则代表使用事件捕获模式 ，false则表示使用事件冒泡模式）
window.addEventListener('click', function() {
console.log('4. You click window');
}, true);
此时我们再点击button就会出现这样的效果
2. 处理目标与事件冒泡阶段
事件到了具体元素时，在具体元素上发生，并且被看成冒泡阶段的一部分，随后冒泡阶段发生，事件开始冒泡。
3. 阻止事件冒泡
事件冒泡过程其实是可以被组织的，防止冒泡带来一些不必要的错误和困扰，方法就是stopPropagation（）
我们对button的click事件加上阻止冒泡
button.addEventListener('click', function(event) {
// event为事件对象
console.log('1. You click Button');
event.stopPropagation();
console.log('Stop Propagation!');
}, false);
我们可以看到如下效果：
可以看到冒泡被组织了，但是这个并不会影响父元素的事件捕获哦~~~
JavaScript中的事件委托
定义：
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。其中包括：
- 现有dom节点的事件
- 新添加dom节点的事件
原因
访问dom次数越多，引起浏览器重绘与重排的次数也就越多，会延长整个页面的交互就需时间。
所以性能优化的主要思想之一就是减少DOM操作，如果此时我们能够用事件委托，所有的操作都会放到js程序里面，与dom的操作就只需要交互一次，大大减少交互次数，提高性能。
原理
事件委托是利用事件冒泡来实现的，举个例子：我们给最外层的div加上一个点击事件，页面上所有子元素的点击事件都会冒泡到最外层的div上面，所以都会触发，委托它们父级代为执行事件就是事件委托。
现有dom节点的事件如何实现？
- 一般方法
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
使用Event对象的一个属性target，可以返回事件的目标节点，也叫做事件源，可以表示为当前时间操作的dom，但不是真正地dom。
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
- 不同元素不同方法
<div id="box">
<input type="button" id="add" value="添加" />
<input type="button" id="remove" value="删除" />
<input type="button" id="move" value="移动" />
<input type="button" id="select" value="选择" />
</div>
window.onload = function(){
var oBox = document.getElementById("box");
oBox.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'input'){
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
}
}
}
}
新添加dom节点的事件如何实现？
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
我们需要移入li，li变红，移出li，li变白，然后点击按钮，我们可以向ul中添加一个子节点li。
如果不按照事件委托的方法，我们要么没办法给新加入的li元素加上事件，要么就会增加一些dom操作，使得性能降低。
使用事件委托的方法：
window.onload = function(){
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var num = 4;
//事件委托，添加的子元素也有事件
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "red";
}
};
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "#fff";
}
};
//添加新节点
oBtn.onclick = function(){
num++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
oUl.appendChild(oLi);
};
}
使用事件委托的办法，只要给父级元素添加时间就好了，其他的都是在js里面执行，大大减少了dom操作。
借用大牛的一道思考题：
现在给一个场景 ul > li > div > p，div占满li，p占满div，还是给ul绑定时间，需要判断点击的是不是li（假设li里面的结构是不固定的），那么e.target就可能是p，也有可能是div，这种情况你会怎么处理呢？
<ul id="test">
<li>
<p>11111111111</p>
</li>
<li>
<div>
</div>
</li>
<li>
<span>3333333333</span>
</li>
<li>4444444</li>
</ul>
解决方法：
var oUl = document.getElementById('test');
oUl.addEventListener('click',function(ev){
var target = ev.target;
while(target !== oUl ){
if(target.tagName.toLowerCase() == 'li'){
console.log('li click~');
break;
}
target = target.parentNode;
}
})
注意点：需要一个递归、一个终止循环的条件差~~
总结
本文主要讲了我们处理事件经常采用的
- 页面中接受事件的顺序的两种观点：事件冒泡和事件捕获，其中事件冒泡占主流。（个人认为这只是大家处理时倾向于采用哪种方式而已！）
- 事件流三个阶段：事件捕获、目标处理、事件冒泡
其中 ：我们可以利用stopPropagation（）方法来阻止冒泡，但是不会影响我们的事件捕获，这个应该会有一些实际用处，但是我目前没有用上过。 - 事件委托：可以性能优化，基本只会和dom交互一次，大大提高性能，但是需要注意下它的使用范围，有些根本不适用的千万不要乱用哦~~（不适用：
mouseover、mouseout、mousemove等等）。
扫一扫
1539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
