JS事件委托机制简介

Posted dontes

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS事件委托机制简介相关的知识,希望对你有一定的参考价值。

目的——为了减少对DOM的操作,使用事件委托。

理解——举例说明:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理——事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,当然,这里当点击ul的时候,也是会触发的,那么问题就来了,如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办,比如说只有点击li才会触发,不怕,我们有绝招:

Event对象提供了一个属性叫target,可以返回事件的目标节点,我们成为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,此时只是获取了当前节点的位置,并不知道是什么节点名称,这里我们用nodeName来获取具体是什么标签名,这个返回的是一个大写的,我们需要转成小写再做比较(习惯问题):

window.onload = function(){
	var oUl = document.getElementById("ul1");
	oUl.onclick = function(ev){
		   var ev = ev || window.event;
		   var target = ev.target || ev.srcElement;
		    if(target.nodeName.toLowerCase() == \'li\'){
		          alert(123);
		     alert(target.innerhtml);
		     }
	 }
}

  toLowerCase()函数是将字符串转为小写。

 

 

参考来源:http://www.cnblogs.com/liugang-vip/p/5616484.html

以上是关于JS事件委托机制简介的主要内容,如果未能解决你的问题,请参考以下文章

JS与Jquery的事件委托机制

JS事件冒泡机制以及委托方法,以及vue中的stop

JS 的事件委托机制

js事件代理(事件委托)最简单的理解

js事件委托

事件流,冒泡,捕获,事件委托