首页  >  文章  >  web前端  >  js事件委托实例总结

js事件委托实例总结

小云云
小云云原创
2018-03-16 17:52:282323浏览

事件委托也叫事件代理,简单点说就是,把事件绑定到父级上,监听子元素的冒泡事件。至于什么是事件冒泡有疑问的请点击js中的事件,其中有对事件冒泡的详细解释。在使用事件委托的时候我们要知道的知识点有什么呢?

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(&#39;#ul1&#39;);
var aLi = oUl.querySelectorAll(&#39;li&#39;);
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = &#39;red&#39;;
    }
    aLi[i].onmouseout = function(){
        this.style.background = &#39;&#39;;
    }
}
</script>

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

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

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

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

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

相关推荐:

JS事件委托实例详解

以上是js事件委托实例总结的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn