美文网首页
JS事件监听

JS事件监听

作者: 哪树繁花 | 来源:发表于2017-09-23 20:42 被阅读15次

    事件监听可以给一个元素添加不同的事件,或者添加相同的事件但是执行不同的操作。 那你可能会说为什么直接给元素的事件赋值呢?像这样:

    obj.onclick = function(){ console.log("click"); }
    obj.ondblclick = function(){ console.log("doublue click"); }
    

    但如果还想给点击事件添加新的方法,只能在原来的基础上添加代码,这样会显得很乱,一种方法就应该封装到一个函数里不是吗?如果再写一个点击事件,就会把原来的覆盖掉。这时候事件监听的优势就体现出来了,用代码说明一切吧。

    var oBtn = document.getElementById("btn");
    //第一个参数为事件,不用加on;第二个参数为函数名;
    //第三个若为 true 则事件采用事件捕获,为false则是事件冒泡,一般情况下用false
    oBtn.addEventListener("click", click1, false);
    oBtn.addEventListener("click", click2, false);
    oBtn.addEventListener("dblclick", dblClick, false);
    
    function click1(){
        console.log("click 1");
    }
    function click2(){
        console.log("click 2");
    }
    function dblClick(){
        console.log("double click");
    }
    

    既然能添加那么肯定也能删除,可以用 oBtn.removeEventListener("click", click1) 移除。但上面的添加和删除方法在低版本IE浏览器都不能用,不过IE有自己的方法:

    oBtn.attachEvent("onclick", click1);
    oBtn.detachEvent("onclick", click1);
    

    这里要注意IE的方法里第一个参数是带上 on 的。
    下面把兼容的函数写一下

    function addEventListener(obj, event, fn, boo){
        if (obj.addEventListener) {
            obj.addEventListener(event, fn, boo);
        } else {
            obj.attachEvent("on" + event, fn);
        }
    }
    function removeEventListener(obj, event, fn, boo){
        if (obj.removeEventListener) {
            obj.removeEventListener(event, fn, boo);
        } else {
            obj.detachEvent("on" + event, fn);
        }
    }
    

    相关文章

      网友评论

          本文标题:JS事件监听

          本文链接:https://www.haomeiwen.com/subject/jllcextx.html