js事件委托实例总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js事件委托实例总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3054字，纯文字阅读大概需要5分钟。

内容图文

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

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

怎么获取事件源呢？

在IE下：window.event.srcElement;

标准下：event.target

兼容性处理：var target = ev.target||ev.srcElement

2、找到当前元素的标签名：nodeName（是大写的要利用到toLowerCase()方法将其转化为小写）

写了这么多那么利用事件委托有什么好处呐？

1、可以提高性能

2、新添加的元素也会有之前的事件

至于体现在哪里，下面就用例子来带你来感受一下呗

HTML代码

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

我们想要的效果就是当鼠标移入li时让对应的li背景颜色变为红色，移出变为原来的颜色

如果利用一般的写法是这样的

<script>
var oUl = document.querySelector('#ul1');
var aLi = oUl.querySelectorAll('li');
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = 'red';
    }
    aLi[i].onmouseout = function(){
        this.style.background = '';
    }
}
</script>

再看看利用事件委托怎么做

<script>
var oUl = document.querySelector('#ul1');
oUl.onmouseover = function(ev){
    var ev = ev||event;//兼容性处理
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li'){
        target.style.background ='red';
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li'){
        target.style.background ='';
    }
}
</script>

上面的方法我们需要为每一个Li都绑定一个点击事件，而下面的方法我们只需要为父级绑定一个点击事件，li个数少的时候还好说，如果li有很多，可想而知，事件委托可以大大的提高性能

例子2、

HTML代码

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
<button id="btn">按钮</button>

我们希望点击按钮的时候，在ul里面再添加li，并且，鼠标每次移入时，li的背景颜色改变，移出时背景颜色变回来，我们知道如果用平常的方法，我们每添加一个li都要为它再添加一个移入移出事件，有多麻烦，你自己试试就知道了，但是如果我么用事件委托就不需要再为其每次都添加了，看下面代码（第一种想必大家都知道怎么做就不再写了，下面只写利用事件委托怎么写）

<script>
var oUl = document.querySelector('#ul1');
var oBtn = document.querySelector('#btn');
oUl.onmouseover = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li'){
        target.style.background ='red';
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li'){
        target.style.background ='';
    }
}
oBtn.onclick = function(){
    var ali = document.createElement('li');
    ali.innerHTML = '1111111111111';
    oUl.appendChild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>

看完上面的是不是觉得事件委托真的很好用呢？所以赶紧用起来吧！

相关推荐：

JS事件委托实例详解

以上就是js事件委托实例总结的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的js事件委托实例总结全部内容，希望文章能够帮你解决js事件委托实例总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端