原生js的attachEvent和addEventListener解決window.onload在一個頁面只能執行一次的問題

1. window.onload和$(document).ready()的區別

一般提到js的window.onload就會聯想到jquery的$(document).ready()，下面簡述下兩者的區別

1）js的window.onload方法是當網頁中的所有元素（包括元素的關聯文件，如圖片）全部加載完畢后執行的，並且一個頁面里面window只能綁定一次onload事件，多次綁定則執行最后一次綁定的處理函數。

2）jquery中的$(document).ready()方法是頁面DOM加載完畢就執行，此時元素的關聯文件（如圖片）可能還沒加載完，特點是一個頁面可以多次調用$(document).ready()方法

下面的輸出結果為：window onload3（前面兩個onload事件不執行）

<script>
window.onload = function() {
    console.log('window onload 1');
};
window.onload = function() {
    console.log('window onload 2');
};
window.onload = function() {
    console.log('window onload 3');
};
</script>

 下面的輸出結果為：

document ready1

document ready2

document ready3

<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    console.log('document ready 1');
});
$(document).ready(function() {
    console.log('document ready 2');
});
$(document).ready(function() {
    console.log('document ready 3');
});
</script>

 

 

2. 用element.attachEvent('onload', handler)替代window.onload

鑒於window.onload在一個頁面只能綁定一次，有時為了在頁面全部元素加載完畢后執行一些方法，會將這些方法全部寫在window.onload函數里面

<script>
window.onload = function() {
    onload1();
    onload2();
    onload3();
};
function onload1() {
    console.log('window onload 1');
}
function onload2() {
    console.log('window onload 2');
}
function onload3() {
    console.log('window onload 3');
}
</script>

這個方法可以解決一部分問題，但是一來代碼不是很美觀，二來當這個頁面引入了一些用到了window.onload方法的插件時，就不能這樣使用了，解決方案是使用ele.attachEvent('onload', handler);

attachEvent是為元素添加事件監聽器，當觸發該事件時調用事件處理函數，原型為：ele.attachEvent('type', handler)。其中ele為添加事件監聽器的元素，type為帶'on'的事件類型如'onload'，handler為事件觸發時的處理函數。

這個方法的特點是可以為同一元素多次綁定同一事件。

下面的代碼在IE系列的輸出結果為：（IE下attachEvent為后綁定先執行）

window onload 3

window onload 2

window onload 1

<script>
window.attachEvent('onload', onload1);
window.attachEvent('onload', onload2);
window.attachEvent('onload', onload3);
function onload1() {
    console.log('window onload 1');
}
function onload2() {
    console.log('window onload 2');
}
function onload3() {
    console.log('window onload 3');
}
</script>

有一點必須注意的是attachEvent是IE的一個私有屬性，現代瀏覽器必須使用ele.addEventListener('load', handler, false);

addEventListener也是為事件注冊監聽器，原型為：ele.addEventListener('type', handler, isCapture)。其中ele為添加事件監聽器的元素，type為不帶'on'的事件類型如'load'，handler為事件觸發時的處理函數，'isCapture'為是否在事件捕獲階段執行處理函數，一般為false。與attachEvent一樣可以為同一元素多次綁定同一事件。

下面的代碼在現代瀏覽器的輸出結果為：（現代瀏覽器下addEventListener為先綁定先執行）

window onload 1

window onload 2

window onload 3

<script>
window.addEventListener('load', onload1, false);
window.addEventListener('load', onload2, false);
window.addEventListener('load', onload3, false);
function onload1() {
    console.log('window onload 1');
}
function onload2() {
    console.log('window onload 2');
}
function onload3() {
    console.log('window onload 3');
}
</script>

 

另外jquery的$(window).load()方法也可以解決window.onload在一個頁面調用一次的問題。