js事件监听器用法及小例子解析-HXC博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  时间轴
  •  留言板
  • 
    js事件监听器用法及小例子解析
     作者:胡新春  发布时间:2017-08-20 21:00:43  访客:0

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下。


    本文实例讲述了js事件监听器用法。分享给大家供大家参考。


    1、当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行。


    如下:

    <span style="font-size:18px;">window.onload = function(){  
        var btn = document.getElementById("yuanEvent");  
        btn.onclick = function(){  
            alert("第一个事件");  
        }  
        btn.onclick = function(){  
            alert("第二个事件");  
        }  
        btn.onclick = function(){  
            alert("第三个事件");  
        }  
    }</span>

    最后只输出:第三个事件,因为后一个方法都把前一个方法覆盖掉了。


    原生态的事件绑定函数addEventListener:

    var eventOne = function(){  
        alert("第一个监听事件");  
    }  
    function eventTwo(){  
        alert("第二个监听事件");  
    }  
    window.onload = function(){  
        var btn = document.getElementById("yuanEvent");  
        //addEventListener:绑定函数  
        btn.addEventListener("click",eventOne);  
        btn.addEventListener("click",eventTwo);  
    }

    输出:第一个监听事件 和 第二个监听事件


    2、采用事件监听给对象绑定方法后,可以解除相应的绑定,写法如下:

    var eventOne = function(){  
        alert("第一个监听事件");  
    }  
    function eventTwo(){  
        alert("第二个监听事件");  
    }  
    window.onload = function(){  
        var btn = document.getElementById("yuanEvent");  
        btn.addEventListener("click",eventOne);  
        btn.addEventListener("click",eventTwo);  
        btn.removeEventListener("click",eventOne);  
    }

    输出:第二个监听事件


    3、解除绑定事件的时候一定要用函数的句柄,把整个函数写上是无法解除绑定的。

    btn.addEventListener("click",eventTwo);  
    btn.removeEventListener("click",eventOne);

    总结:对函数进行封装后的监听事件如下,兼容各大主流浏览器。

    点评一下

    
    程序:HXC博客v1.0+ 主题:HXC博客前端Funs主题    环境:lamp  后台
    博客平稳运行2年+