孙肖宁

javascript中的事件
事件的绑定方式一:直接绑定var btn = document.getElementsByTagName(&quo...
扫描右侧二维码阅读全文
09
2018/04

javascript中的事件

事件的绑定

方式一:直接绑定

var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
    console.log("1");
}

注意:该方式绑定的事件,后来的会覆盖掉以前的。
方式二:addEventListener

btn.addEventListener("click",fn1);
function fn1(){
    console.log("1");
}

注意:该方式绑定的事件,后来的不会覆盖掉以前的。

添加事件的兼容性写法

EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下,用此代码
                ele["on"+str] = fn;
            }
        }
    }

解绑事件的兼容性写法

EventListen = {
    addEvent: function (ele,fn,str) {
        //通过判断调用的方式兼容IE678
        //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
        if(ele.addEventListener){
            //直接调用
            ele.addEventListener(str,fn);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+str,fn);
        }else{
            //在addEventListener和attachEvent都不存在的情况下,用此代码
            ele["on"+str] = fn;
        }
    },
    removeEvent: function (ele,fn,str) {
        if(ele.removeEventListener){
            ele.removeEventListener(str,fn);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+str,fn);
        }else{
            ele["on"+str] = null;
        }
    }
}
Last modification:April 9th, 2018 at 02:27 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment