使用原生 JS 实现事件委托
2017-06-17 本文已影响0人
shadow123
事件委托是什么
把若干个节点上的相同事件的处理函数event listener绑定到它的父节点上去, 在父节点上统一处理，减轻对event listener的管理负担。
为什么要有事件委托
1.监听还不存在的元素或者已经存在的元素
2.减少监听器的个数
如何做到事件委托
<body>
<button id="xxx">取号</button>
<ul>
<li>
<ol id="yyy"></ol>
</li>
</ul>
<script>
let button = document.querySelector("#xxx");
let yyy = document.querySelector('#yyy');
button.addEventListener('click',function(){
let number = parseInt(Math.random() * 100, 10);
let li = document.createElement('li');
let span = document.createElement('span');
span.textContent = number;
li.appendChild(span);
yyy.appendChild(li);
});
yyy.addEventListener('click',function(e){
let element = e.target;
while(element.tagName !== "LI"){
if(element === yyy){
element = null;
break;
}
element = element.parentNode;
}
element && element.remove()
})
</script>
</body>
用户先点击取号，再点击li元素或者span元素时，就执行ol元素的监听事件，把点击的li元素或span元素删除，不用监听每个元素，监听它们的父元素即可。
