事件委托
事件委托原理:事件冒泡
不给每个子节点单独设置事件监听器,而是把事件监听器设置在其父节点上,让其利用事件冒泡的原理,当在子元素上触发事件时,事件冒泡到父元素,父元素注册的事件就会起作用,从而影响到子节点(子节点也就有了父元素的事件效果)。
简而言之,就是不给子元素注册事件,给父元素注册事件,让处理代码在父元素的事件中执行。
优点:只操作一次DOM,提高了程序的性能。
相关属性:
例如:
页面上有一个列表ul,累不有若干个li元素,给它们批量添加点击事件监听,实现点击哪个li元素,哪个li元素的背景色就变成粉色。
<ul>
<li>第一个子节点</li>
<li>第二个子节点</li>
<li>第三个子节点</li>
<li>第四个子节点</li>
<li>第五个子节点</li>
</ul>
var ul1=document.querySelector('ul');
ul1.addEventListener('click',function(e){
console.log(e)
console.log(e.target) //e.target代表真正点击到的元素
console.log(e.currentTarget) //代表事件绑定的对象,绑定在谁身上就是谁,这里是ul
e.target.style.backgroundColor='pink'; //设置事件对象的样式
})
升级:
在添加节点的同时,为li标签添加上点击效果:
<input type="button" value="添加节点" id="btn">
<ul id="list"></ul>
<script>
let oBtn=document.querySelector('#btn')
let oList=document.querySelector('#list')
oBtn.onclick=function(){
let oLi=document.createElement('li'); //创建孤儿节点
oLi.innerHTML='列表项' //添加内容
oList.appendChild(oLi) //把孤儿节点添加到ul上
}
oList.onclick=function(e){
e.target.style.backgroundColor='pink'
}
</script>
使用场景:
当有大量类似元素需要批量添加事件监听时,使用事件委托可以减少内存开销。
当有动态元素节点添加在DOM树上时,使用事件委托可以让新上树的元素具有事件监听。
注意事项:
onm ouseenter和onmouseover都表示事件进入,但它们是有区别的:
onmouseenter不发生事件冒泡(作用在子元素上的事件不会冒泡到父元素,当然也就无法触发父元素绑定的事件监听了),onmouseover发生事件冒泡(事件委托中同click事件)。
要注意:
(1)使用事件委托时,不能委托不冒泡的事件给父元素;
(2)最内层元素不能再有额外的内层元素;
不发生事件冒泡的事件:blur(失去焦点),focus(获得焦点),load(页面加载完成后),unload,ommouseenter,ommouseleave。
focusin(元素获取焦点时),focuout(失去焦点时),支持冒泡。
e.bubbles
为true表示事件可以冒泡。