CaiJin's Life Notes

生活筆記

JS 事件委托

面试被问到事件委托了,虽然很早之前就使用过事件委托,但是面试的时候居然没有能够讲清楚,再总结一下吧。

第一次经历面试,真的很紧张,很多自己明明会的东西也说不清,实在是丢脸。面试估计已经凉凉 了,吸取一下教训吧,学习的时候一定要学习扎实了。

什么是事件委托

事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。

引用个的例子:

有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

那么为什么需要事件委托:

实现

传统写法

<ul id="list">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>

<script>
let item1 = document.getElementById("item1");
let item2 = document.getElementById("item2");
let item3 = document.getElementById("item3");

item1.onclick = () => {
alert("hello item1");
}
item2.onclick = () => {
alert("hello item2");
}
item3.onclick = () => {
alert("hello item3");
}
</script>

事件委托

<ul id="list">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>

<script>
let ul = document.querySelector('#list');
ul.addEventListener('click', (event) => {
console.log('hello ' + event.target.innerText)
})
</script>

利用事件委托,只需要给父元素添加了事件,就可以给所有 li 绑定事件,而不必要给每个 li 分别添加事件。这样就非常节省内存了,也很方便。

同时实现了动态添加 DOM 的时候不需要再添加事件。例子:

<ul id="list">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>

<script>
let ul = document.querySelector('#list');
ul.addEventListener('click', (event) => {
console.log('hello ' + event.target.innerText)
})
let newVal = `<li id="item4">item4</li>`
ul.innerHTML = ul.innerHTML + newVal
</script>

这个时候点击新添加的 item4 会发现打印了 hello item4 说明 item4 绑定了事件,即事件委托可以为新添加的 DOM 元素动态的添加事件。

PREVIOUS

JavaScript 二叉搜索树

NEXT

JS 的深拷贝和浅拷贝总结

ALL TAGS