在前端開發中處理不同瀏覽器之間的兼容問題時家常便飯,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();
}
})
}
}
