JS 事件委托
2022-07-29 本文已影响0人
cy_Wey
什么是事件委托
- 事件委托，就是将本来 A 处理的事情，委托给 B 来处理，也称为事件代理。
- 每个函数都是对象，占用内存。内存中的对象越多，性能越差。解决处理过多问题的办法是事件委托。
- 事件委托是通过事件冒泡来实现的，只指定一个事件处理程序，就可以管理某一类型的所有事件。
事件委托的实现
示例1
需求：当鼠标悬浮在 li 元素上，li 元素背景变成红色，离开时，去掉背景
不使用事件委托
<body>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
window.onload = () => {
let oUl = document.querySelector('.ul')
let aLi = oUl.getElementsByTagName('li')
for (let i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function () {
this.style.background = 'red';
}
aLi[i].onmouseout = function () {
this.style.background = '';
}
}
}
</script>
</body>
这种方法需要 通过 for 循环遍历每个 li ，占用监听内存，如果 li 较多，会导致性能变差。而且不能监听动态元素。
使用事件委托
<script>
window.onload = () => {
let oUl = document.querySelector('.ul')
oUl.onmouseover = function (e) {
e = e || window.event
let target = e.target || e.srcElement
if (target.nodeName.toLowerCase() === 'li') {
target.style.background = 'red'
}
}
oUl.onmouseout = function (e) {
e = e || window.event
let target = e.target || e.srcElement
if (target.nodeName.toLowerCase() === 'li') {
target.style.background = ''
}
}
}
</script>
