事件委托原理及案例

事件委托

事件委托原理：事件冒泡

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

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

优点：只操作一次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树上时，使用事件委托可以让新上树的元素具有事件监听。

注意事项：
onmouseenter和onmouseover都表示事件进入，但它们是有区别的：

onmouseenter不发生事件冒泡（作用在子元素上的事件不会冒泡到父元素，当然也就无法触发父元素绑定的事件监听了），onmouseover发生事件冒泡（事件委托中同click事件）。

要注意：

（1）使用事件委托时，不能委托不冒泡的事件给父元素；

（2）最内层元素不能再有额外的内层元素；

不发生事件冒泡的事件：blur（失去焦点），focus（获得焦点），load（页面加载完成后），unload，ommouseenter，ommouseleave。

focusin(元素获取焦点时),focuout(失去焦点时)，支持冒泡。

e.bubbles为true表示事件可以冒泡。