事件委托 就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
比如一个ul有100个li, 这 100个 li 都有相同的点击事件,如果我们采用循环的方法对这100个liclick方法,这样我们就需要不断的和DOM节点交互,DOM访问次数越多,DOM重绘重排就越多。可是如果使用 事件委托机制去处理的话,我们只需要给 ul 加上个点击事件就可以了,DOM操作只需交互一次,大大提高性能。
那事件委托是怎么去实现的呢?
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?
就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
如果我们只想在点击li的时候触发 点击事件,点击 ul的时候不会触发,这个时候我们可以使用(target):
Event对象提供了一个属性叫target,可以返回事件的目标节点,也就是目标源,target就可以表示最初触发事件的DOM元素,标准浏览器用ev.target,IE浏览器用event.srcElement,这时只是获取了当前节点的位置,并不知道是什么节点名称,这里我们用nodeName来获取具体是什么标签名,这个返回的是一个大写的,我们需要转成小写(target.nodeName.toLowerCase)再做比较
if(target.nodeName.toLowerCase() == ‘li’)
通常我们会比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。