事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点:减少注册次数,可以提高程序性能
原理:事件委托其实是利用事件冒泡的特点。
给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
实现:事件对象.target.tagName可以获得真正触发事件的元素
事件委托的好处是什么?
减少注册次数,提高了程序性能
事件委托是委托给了谁?父元素还是子元素?
父元素
如何找到真正触发的元素?
事件对象.target.tagName
事件委托的例子
点击li会变色,点击p不会变色
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<p>不要变色</p>
</ul>
<script>
const ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
if (e.target.tagName ==='LI'){
e.target.style.color = 'red'}
})
</script>
在没有学事件委托的时候,让ul里的
li变颜色必须要用for循环,绑定事件,就比较浪费资源。事件委托,通过冒泡事件,点击li会去掉用ul的事件,比较方便。