JavaScript事件委托
- 原理：利用事件的冒泡原理，当你点击
ul>li时，会从最深的节点开始向外传播li>ul，当ul里面有很多li时，可以把这一类的li的事件处理都委托给父级ul代为执行 - 举例
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
//给每个li都绑定事件
window.onload = function(){
let oUl = document.getElementById("ul1");
let aLi = oUl.getElementsByTagName('li');
for(let i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
console.log(aLi[i].innerText);
}
}
}
//把所有的li事件都委托给父级ul来处理
window.onload = function(){
let ul = document.getElementById("ul1");
ul.onclick = function(event){
let e = event || window.event;
//标准浏览器用e.target，IE浏览器用event.srcElement
let target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(target.innerHTML);
}
}
}
- 总结：适合用事件委托的事件
click，mousedown，mouseup，keydown，keyup，keypress - 优点：减少了事件处理程序，减少了内存占用
