javascript 中的事件委派的作用是什么

JavaScript016

javascript 中的事件委派的作用是什么,第1张

所谓事件委托，就是让一个下属分别干的事情交给上司办了。比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交个上司来完成，那么就是你鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面的一个个的去找实现函数。很简单的例子就是给ul中的li加事件：

<ul id="ul1">

<li>111</li>

<li>222</li>

<li>333</li>

<li>444</li>

</ul>

如果给每个li添加点击事件：

var li=document.getElementsByTagName('li')

for(var i=0i<li.lengthi++)

alert(li[i].innerHTML)

要是用事件委托

var ul=document,getElementById('ul1')

var target = ul.target || ul.srcElement //兼容处理

alert(target,innerHTML)

这样做的好处就是不在进行查询，减少了DOM操作，极大地改善了代码性能。

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

1.标准写法：利用事件对象里面的 stopPropagation()方法

e.stopPropagation()

2.非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

e.cancelBubble = true

事件委托也称为事件代理， 在 jQuery 里面称为事件委派。 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

如：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器，这里只操作了一次 DOM ，提高了程序的性能。