事件委托原理及案例

事件委托

事件委托原理:事件冒泡

不给每个子节点单独设置事件监听器,而是把事件监听器设置在其父节点上,让其利用事件冒泡的原理,当在子元素上触发事件时,事件冒泡到父元素,父元素注册的事件就会起作用,从而影响到子节点(子节点也就有了父元素的事件效果)。

简而言之,就是不给子元素注册事件,给父元素注册事件,让处理代码在父元素的事件中执行。

优点:只操作一次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表示事件可以冒泡。

上一篇:移动鼠标进行菜单选择高亮选中项


下一篇:key属性的作用