事件委托也称事件代理。
事件委托原理:
比如ul和li,不用再给每个子节点li单独设置事件监听,而是把事件监听设置在父节点ul身上,然后利用冒泡原理,影响设置每个子节点li。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector("ul");
ul.addEventListener("click",function(e){
// 三个li都会弹出1 因为有事件冒泡 点击li后,因为ul绑定了事件监听,会冒泡到ul身上,所以会触发事件监听
alert(1);
})
</script>
点击当前li,当前li变颜色:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector("ul");
ul.addEventListener("click",function(e){
// 还是用到排他思想
for(var i=0; i<ul.children.length; i++){
ul.children[i].style.color = "";
}
// 触发了谁 谁的颜色变为绿色
e.target.style.color = "red";
})
</script>