一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。
<body>
<div id="div">
<button id="btn">点击</button>
</div>
<script>
window.onload = function () {
let btn = document.querySelector("#btn")
let div = document.querySelector("#div")
//在btn的父元素div上添加监听函数
div.addEventListener("click", function (e) {
console.log("btn被点击了")
})
}
</script>
</body>
事件委托的优点
节约内存空间,提高JS性能
例:在 ul 上创建 100 个 li标签,点击每个 <li>都要绑定 click 事件,需要监听100个<li>的事件,占据大量内存。可以动态添加 DOM 子元素,不需要因为元素的变动而修改事件绑定。
例:监听一个目前不存在的DOM元素(以后可能存在)。
解:可以监听该DOM元素的祖先(事件委托),点击时再判断是不是我要监听的元素即可。事件委托注意事项
事件委托绑定的元素,最好是被监听元素的父元素,如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。
因为事件冒泡的过程也要耗时,越接近顶层,事件的「事件传播链」就越长,也就越耗时。