js中对于添加事件监听者addEventListener和attachEvent

在前端开发中处理不同浏览器之间的兼容问题时家常便饭,ie老版本总是一个奇葩的存在,每次敲代码都得考虑ie老版本的兼容问题,今天我想说一下添加事件监听者addEventListener和attachEvent

一般浏览器添加事件监听者用addEventListener方法,打比方说我们需要监听文档是否加载完毕,如果加载完毕就调用对应的函数,一般会使用window.onload方法,但是这个方法效率不高,所以我们需要使用别的方式来加载,例如我们监听DOMContentLoaded这个事件

   function ready(fn) {
       if(document.addEventListener){
           document.addEventListener('DOMContentLoaded',fn);
       }
   }

对于ie老版本ie8以及以下对应的addEventListener不能使用,我们可以使用attachEvent这个方法来监听对应的onreadystatechange事件

一般来说readystate有四种状态:
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成
我们只需要监听载入完成

var ready = function (fn) {
// 进来直接判断状态是否已经加载完毕,如果加载完毕就直接调用对应的函数
            if(document.readyState === 'complete'){
                fn();
            }
            if(document.addEventListener){
                document.addEventListener('DOMContentLoaded',fn);
            }else {
                document.attachEvent('onreadystatechange',function () {
                    if(document.readyState === 'complete'){
                        fn();
                    }
                })
            }
        }