在前端开发中处理不同浏览器之间的兼容问题时家常便饭,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();
}
})
}
}
