共计 1633 个字符,预计需要花费 5 分钟才能阅读完成。
js 事件委托有的说法也叫事件代理。它可以让我们添加监听器到父元素上,来避免监听每个子元素。下面我们通过一个简单的例子来说明 js 事件委托。
实现原理:js 中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上。事件委托就是,本来加在子元素身上的事件,加在了其父级身上。父级那么多子元素,怎么区分事件本应该是哪个子元素的?答案是 event 对象里记录的有“事件源”,它就是发生事件的子元素。它存在兼容性问题,在老的 IE 下,事件源是 window.event.srcElement,其他浏览器是 event.target。
现在一个列表里有几千个子元素,我们想要鼠标移动到一个子元素上将其背景变为灰色。
<div id="container">
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
................
<li>item2000</li>
</ul>
</div>
<script>
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.style.background = 'gray';}
lis[i].onmouseout = function() {this.style.background = '';}
}
</script>
我们可以通过遍历 li 元素,然后给每个元素添加鼠标滑动事件修改背景色。这种方法当 li 元素较少时不会有什么问题,但是元素如果很多就会使页面变得很卡。
现在换一种方式,把鼠标移动事件作用到 ul 上,然后使用 event.target 来检查是哪个元素被获得事件。
// 事件委托,将鼠标移动事件作用到 li 的父元素 ul 上
var ule = document.getElementsByTagName('ul')[0];
ule.onmouseover = function(ev) {
var ev = ev || window.event; // 兼容 IE 浏览器
var uli = ev.srcElement || ev.target;
// 判断事件源是不是 li,如果是才修改背景。如果不做判断,当移动到 ul 上时也会修改背景
if (uli.nodeName.toLowerCase() == 'li') {uli.style.background = 'gray';}
}
ule.onmouseout = function(ev) {
var ev = ev || window.event; // 兼容 IE 浏览器
var uli = ev.srcElement || ev.target;
if (uli.nodeName.toLowerCase() == 'li') {uli.style.background = '';}
}
现在通过监听 li 的父元素,然后通过获得事件的 target 属性操作元素背景。但是这样会发现还是有一个问题,当鼠标移动到 ul 上时会使整个 ul 背景修改掉。因此需要加一个判断 nodeName 时 li 时才修改背景色。
事件委托有哪些优点:
1. 效率高,不用 for 循环为子元素添加事件了
2. js 新生成的子元素也不用新为其添加事件了,程序逻辑上比较方便
对于第二个优点我们遇到的应该比较多,例如当我们需要在 ul 中动态添加几个 li 时,如果用传统的方法,for 循环为 li 添加事件,问题就出现了,最开始有的 li 是有 onmouseover 和 onmouseout 事件的,但是后来动态生成的 li 里没有这两个事件处理函数,因为 for 循环的时候它还没生成。只能再生成 li 后再绑定事件,真是麻烦的很。而事件委托的方式就没事,当后来动态生成的 li 出现的时候,不用做改变,移到它身上,还是变色的,因为事件是绑定在 ul 身上的。
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)