事件冒泡和事件委托
2019-04-13 本文已影响0人
Fastrider
一、事件冒泡
例1：
html部分
<body>
<div id="d1">1
<div id="d2">2
<div id="d3">3</div>
</div>
</div>
js部分
//事件冒泡
document.getElementById("d1").onclick = function(e){
console.log('d1');
};
document.getElementById("d2").onclick = function(e){
console.log('d2');
}
document.getElementById("d3").onclick = function(e){
event.stopPropagation(); //阻止事件冒泡
console.log('d3');
};
解析：由代码结构可知，这是一个三层div嵌套结构，d1是d2的父级，d2是d3的父级。在js部分我们绑定了三个点击事件onclick，触发事件后会打印出对应div的id名，当我们注释掉 event.stopPropagation();时，打印结果如下：
点击d2(存在冒泡)
2.点击d3：
点击d3(存在冒泡)
3.点击d3：之所以出现上述的情况，就是因为存在事件冒泡，当事件经历由捕获到冒泡的过程，以至于默认该元素和它的父级元素均触发了点击事件，所以点击d3会出现由d3,d2,d1依次打印的情况。
现在需要阻止d3事件冒泡，只需要在d3的点击函数中添加这个代码event.stopPropagation()即可。打印结果如下：
点击d3(已阻止冒泡)
二、事件委托
通俗定义：用冒泡的原理，将元素的绑定事件加到该元素的父级上处理。
好处：节省资源，可以代码复用
例2：当我们不使用事件委托的时候：
html部分：
<div>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
js部分：
//事件触发
var list = document.getElementById("list");
var li = list.getElementsByTagName("li");
for(let i = 0;i<li.length;i++){
li[i].onclick = function(){
console.log(this.innerHTML);
}
}
直接事件触发
、
例3：使用事件委托
html部分：
<div>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
js部分：
//事件委托的实现
list.onclick = function(e){
var e = e || window.event;
e.target = e.target || e.srcElement;
if(e.target.nodeName.toLowerCase()=="li"){
console.log(e.target.innerHTML)
}
}
当我们依次点击每个li时，打印结果如下：
采用事件委托
解释：虽然在打印结果上看不到区别，但是对于计算机资源的利用是不同的，我们在绑定事件时可用考虑使用时间委托来提高自己的代码复用率，减少资源浪费。
