什么叫事件委托
事件委托也称之为事件代理(Event Delegation)。 是JavaScript中常用绑定事件的常用技巧。 顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务。
事件委托原理
事件委托是利用事件的冒泡原理来实现的,那么什么是事件冒泡呢?事件冒泡就是事件从最深的节点开始,然后逐步向上传播事件.举个例子:页面上有这么一个节点树,div>ul>li;比如给最里面的li添加一个click点击事件,那么这个事件就会一层一层的往外执行.而利用事件委托,给最外层的div添加click事件,那么里面的ul,li做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件.
事件委托的实现
**HTML和css部分
<style>
ul {
list-style: none;
}
li {
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: aqua;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var myUl = document.querySelector('ul')
var myLi = [...document.querySelectorAll('li')]
myUl.onclick = function(e){
if(e.target.nodeName === 'LI'){ //target.nodeName得到的是大写的LI,一定要是不一样的,标签是小写,这里就要用大写
console.log('点击了li')}
}
// 创建一个 Li 节点
var newLi = document.createElement('li')
newLi.innerText = '我是通过 JS 创建的'
myUl.appendChild(newLi) //新添加的li也可以触发点击事件
事件委托
* 因为事件冒泡的存在, 所以点击子元素时, 一定会触发给父级
*
* 所以可以将子元素统一的事件, 都提交给父级,在这里我们需要给所有的li都添加一个点击事件,那么我们就可以把click添加给ul
*
* e.target: 触发事件的事件源
*
*
* 总结:
* 为什么要用事件委托
* 动态的添加了 li 时, 新加的li没有绑定上事件, 需要动态添加完成后重新绑定事件, 这样操作比较麻烦
* 所以此时可以利用事件委托
*
* li 的点击事件必须委托给父级的 点击事件
</script>