js事件委托也叫事件代理

事件委托也叫事件代理,简单点说就是,把事件绑定到父级上,监听子元素的冒泡事件


在利用事件委托的时候,我们还必须要知道一个概念:事件对象下的事件源

事件源:在事件中,当前操作的那个元素就是事件源。比如我们点击a标签发生onclick事件时,事件源就是a标签,当点击li发生onclick事件时,那么事件源就是li

window.onload = function(){ 


    var oUl = document.getElementById(‘ull’);


    var aLi = document.getElementsByTagName(‘li’); //获取所有列


    for(var i =0;i < aLi.length;i++){ 


         aLi[i].onmouseover = function(){              this.style.background = “red”;         }


}

当然这样一看代码也没什么问题,通过循环给每个li加事件,但想一想如果我们有很多个li,是不是要加很多次事件,这样其实是非常耗性能的。那么我们会想,能不能只加一个事件就能实现呢。当然是能的,不然我就不会在这扯了。

     那就是通过冒泡原理进行事件委托,我们可以把事件只加给父级oUL,这样不管移入哪个li,都会触发父级的移入事件,(对冒泡不太理解的,可以参考我的JS冒泡的文章),但这个时候也有个问题,因为我的需求是,让对应的li变颜色,不是让整个列表变,它怎么知道我鼠标移入的是哪个LI,这个时候万能的事件对象中的一个属性就要出场了,就是事件源 (不管事件绑定在那个元素中 都指的是实际触发事件的那个的目标),就是能获取到你当前鼠标所在的LI,

不过这个有兼容性问题, IE和标准下不同,标准指的就是比较新版本的那些浏览器了

IE:window.event.srcElement


标准:event.target

所以需要做下兼容,也很简单。

window.onload = function(){ 


    var oUl = document.getElementById(‘ull’);


     var aLi = document.getElementsByTagName(‘li’);

  oUl.onmouseover = function(ev){ 


     var event = ev||window.event;  // 获取event对象


     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象


    


     if(target.nodeName.toLowerCase() == ‘li’){  //判断目标对象是不是li


         target.style.background = ‘red’;


     }

  }


代码中加了一个标签名的判断,主要原因是如果不加判断,当你鼠标移入到父级oUL上面的时候,整个列表就会变红,这不是我们想要的结果,所以要判断一下。


target.nodeName 弹出的名字是大写的,所以需要转换大小写再比较。

其实事件委托还有第二个优点:就是新添加的元素还会有之前的事件

假定我们又有一个需求,点击某个按钮,可以在列表中再创建一个li,这个时候一般方法,因为新创建的li没有加事件,所以是不具备移入变红的功能的,但是用事件委托的方法,新的li,同样有这个事件。原理也很容易相同,因为事件是加在父亲上面的,父亲在,事件在


js中的分号
« 上一篇 2020年11月13日 上午12:00
js单线程中的同步和异步
下一篇 » 2020年11月13日 上午12:00