工作上有機會再把這三個 Event Handlers 再看一下，作一個簡單的比較。
來源
- window.onload 定義在 HTML Specification
- $(document).ready 和 $(window).load 來自 jQuery
功能
- window.onload 和 $(window).load 被 Trigger 的時機點為當整個頁面都被完整 Loading, 包括 html, javascript, css 和圖片都下載完，連裡面的 iframe 裡的元素都要 load 完才會 trigger。
- $(document).ready 則是在html download 後，DOM structure 被完整建立後則會被 trigger，不必等候其他元素下載。
例子
- 會在整個頁面 load 完，而且 body 內的圖片也都 download 完成了，才會 trigger 並執行 alert 。
- 使用上要注意 window.onload 會有 overwrite 的現象，如下面例子就只會 alert 出 “onload2”。
<html>
<head>
<script>
window.onload = function() {
alert("onload1");
}
window.onload = function() {
alert("onload2");
}
</script>
</head>
<body>
<img src='http://test.com/haha.jpg' />
</body>
</html>
- 執行的時機點為 DOM 建立完成後，不用等到圖片或其他元素下載完就會執行 alert。
- 不會有 overwrite 的現象，如下面例子會 alert 出 “onload1” and “onload2”。
<html>
<head>
<script>
$(document).ready(function() {
alert('document.ready1');
});
$(document).ready(function() {
alert('document.ready2');
});
</script>
</head>
<body>
<img src='http://test.com/haha.jpg' />
</body>
</html>
使用時機
- window.onload 和 $(window).load: 一般來說，除非一些特殊的情況，像要對圖片本身長寬作判斷作處理等等，不然幾乎都會利用 $(document).ready 來 binding 或執行其他 javascript codes
- $(document).ready: 一般來說，在 DOM 建立完成後，就可以開始 binding 其他 event handlers。
發表文章
0 意見:
張貼留言