JavaScript封装一个注册函数解决兼容问题

Posted 2021-12-09 CSU迦叶

我们知道javascript注册(绑定)事件主要有两类方式，第一类传统方式具有注册事件的唯一性，即对于同一元素的同一事件，不会出现两个处理函数，如下

    var btn = document.querySelector('button');

    btn.onclick = function(){
        document.body.style.backgroundColor = "yellow";
    }

第二类没有唯一性限制，具体有两种做法，其中addEventListener方法需要ie9以上浏览器支持，例如

    function handle(){
        document.body.style.backgroundColor = "yellow";
    }

    btn.addEventListener('click',handle);

另一种attachEvent需要ie9以前的浏览器支持，例如

    function handle(){
        document.body.style.backgroundColor = "yellow";
    }

    btn.attachEvent('onclick',handle);

兼容性处理原则是：首先照顾大多数浏览器，再处理特殊浏览器

然后又不希望被注册事件的唯一性限制住

因此，优先级是addEventListener>attachEvent>传统方式

    function addEventListener(element,eventName,handleFn){
        if(element.addEventListener){
            element.addEventListener(eventName,handleFn);
        }else if(element.attachEvent){
            element.attachEvent('on'+eventName,handleFn);
        }else{
            element['on'+eventName] = handleFn;
        }
    }