js事件委托也叫事件代理
2020/11/13 12:00:58 阅读：2581
发布者：2581
事件委托也叫事件代理，简单点说就是，把事件绑定到父级上，监听子元素的冒泡事件
在利用事件委托的时候，我们还必须要知道一个概念：事件对象下的事件源
事件源：在事件中，当前操作的那个元素就是事件源。比如我们点击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,同样有这个事件。原理也很容易相同，因为事件是加在父亲上面的，父亲在，事件在
