事件冒泡, 事件捕获与事件委托
一.事件冒泡, 事件捕获
1.事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
2.在冒泡型事件流中click事件传播顺序为<div>—》<body>—》<html>—》document
在捕获型事件流中click事件传播顺序为document—》<html>—》<body>—》<div>
注意：
1）、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：
IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。
IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。
3.看一个例子：
EventTarget.addEventListener(),默认useCapture 参数为false,即冒泡事件为默认事件，更多参数可以参考mdn
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
#outer{
position: absolute;
width: 400px;
height: 400px;
top:0;
left: 0;
bottom:0;
right: 0;
margin: auto;
background-color: deeppink;
}
#middle{
position: absolute;
width: 300px;
height:300px;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: deepskyblue;
}
#inner{
position: absolute;
width: 100px;
height:100px;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;;
background-color: darkgreen;
text-align: center;
line-height: 100px;
color:white;
}
#outer,#middle,#inner{
border-radius:100%;
}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
click me!
</div>
</div>
</div>
<script>
var innerCircle= document.getElementById("inner");
innerCircle.addEventListener("click", function () {
console.log("innerCircle的click事件在捕获阶段被触发");
},true);
innerCircle.addEventListener("click", function () {
console.log("innerCircle的click事件在冒泡阶段被触发");
},false);
var middleCircle= document.getElementById("middle");
middleCircle.addEventListener("click", function () {
console.log("middleCircle的click事件在捕获阶段被触发");
},true);
middleCircle.addEventListener("click", function () {
console.log("middleCircle的click事件在冒泡阶段被触发");
},false);
var outerCircle= document.getElementById("outer");
outerCircle.addEventListener("click", function () {
console.log("outerCircle的click事件在捕获阶段被触发");
},true);
outerCircle.addEventListener("click", function () {
console.log("outerCircle的click事件在冒泡阶段被触发");
},false);
</script>
</body>
</html>
二. 事件委托（也叫事件代理）
事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
总结一下事件委托的好处：
- 将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
- DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。
看个例子：
<ul id = "list">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
var myList = document.getElementById('list');
myList.onclick = function (e){
var tar = e.target;
if(tar.nodeName == 'LI'){
tar.style.backgroundColor = 'red';
}
}
输出索引的方法1：
<script>
var myul = document.querySelector('ul');
var list = document.querySelectorAll('li');
myul.addEventListener('click', function (e) {
var target = e.target;
if (target.nodeName.toUpperCase() === 'LI') {
console.log([].indexOf.call(list, target)); //这里有点不理解，但是确实可以实现
}
}, false)
</script>
方法二：（ES5写法）
var myul = document.querySelector('ul');
var list = document.querySelectorAll('li');
for(var i = 0; i < list.length; i++){
function (i){
list[i].onclick = function() {
console.log(i);
}
})(i)
} ES6写法：
var myul = document.querySelector('ul');
var list = document.querySelectorAll('li');
for(let i = 0; i < list.length; i++){
list[i].onclick = function() {
console.log(i);
}
} 
投递中国移动北京等公司10个岗位 >
查看2道真题和解析