使用addEventListner和簡單的Onclick/Ondblclick調用函數有什麼區別?使用addEventListner和簡單的Onclick/Ondblclick調用函數有什麼區別?
2
A
回答
4
onclick等是DOM 0級事件。他們在每個瀏覽器中工作,但他們不允許您輕鬆地將多個處理程序添加到同一元素中的相同事件。這意味着,使用像
window.onload = function() {
// THE CODE TO RUN
};
東西將刪除已經沒有任何功能,所以你不得不用這樣的招數:
(function (oldonload) {
window.onload = function() {
// THE CODE TO RUN
oldonload();
};
}(window.onload));
用的addEventListener你沒有做到這一點。你只是寫:
window.addEventListener("load", function() {
// THE CODE TO RUN
}, false);
它只是工作...但不是在IE瀏覽器!在IE上,你必須使用attachEvent,它除了在 IE之外不能在任何地方使用。所以,你還是要這樣寫代碼:
function yourCode() {
// THE CODE TO RUN
}
if (window.addEventListener) {
window.addEventListener('load', yourCode, false);
} else {
window.attachEvent('onload', yourCode);
}
而在所有情況下,你還需要檢查文件是否已經加載,所以你只要運行你的代碼瞬間,而不是將它綁定到一個已經發生的事件而不會再發生了 - 這意味着更多的代碼:
function yourCode() {
// THE CODE TO RUN
}
if(document.loaded) {
yourCode();
} else {
if (window.addEventListener) {
window.addEventListener('load', yourCode, false);
} else {
window.attachEvent('onload', yourCode);
}
}
的一點是,如果你想讓你的事件處理代碼保持強勁,並與所有瀏覽器兼容,那麼它很快變得非常複雜。這就是爲什麼我總是建議使用像jQuery庫做出來給你,讓你不必擔心這些細節,只是寫:
$('some-id').click(function() {
// THE CODE TO RUN
});
,它神奇地運行在所有瀏覽器。
1
addEventListner允許您添加多個偵聽器。
1
當您直接在節點上添加onclick/onmouseover時,您會將結構/數據與行爲耦合在一起,這並不好,特別是如果您關心能否維護代碼。 (使用addEventListener)你:(a)獲得對你的JS單獨進行增量更改的能力(反之亦然),(b)有能力在不同的JS上重複使用相同的JS HTML(在另一頁上說),(c)獲得單獨緩存JS的能力(假設你把它放在一個外部文件中),從而提高總體性能。
最重要的是(正如@JohnPick的回答),它允許您將多個偵聽器添加到同一個節點。
相關問題
- 1. 函數調用和函數引用有什麼區別?
- 2. 調用函數和返回函數有什麼區別?
- 3. apply()函數和使用類對象的函數調用有什麼區別?
- 4. 使用compose()和簡單的flatMap()之間有什麼區別?
- 5. form_load和button_click中的調用函數有什麼區別?
- 6. 使用XMLHttpRequest和表單調用URL有什麼區別?
- 7. 簡單睡眠(使用wait_event _ *()函數)和高級睡眠(使用prepare_to_wait()函數)有什麼區別?
- 8. GoTo,使用Select和使用單獨的函數有什麼區別?
- 9. 「new」和直接調用generator函數有什麼區別?
- 10. 調用函數{}和()之間有什麼區別?
- 11. 函數調用和goto&NAME在Perl中有什麼區別?
- 12. 將函數調用爲fun()和樂趣有什麼區別?
- 13. include()和在PHP中調用函數有什麼區別?
- 14. 函數調用「mail()」和「@mail()」之間有什麼區別?
- 15. 函數指針與函數調用有什麼區別?
- 16. 調用ThinkingSphinx.search和ModelName.search ...有什麼區別?
- 17. 綁定和調用有什麼區別?
- 18. 調用exampleFunction()和exampleFunction.call()有什麼區別?
- 19. 回調函數和常規函數有什麼區別?
- 20. 本地調用open_sftp()和通過單獨的函數有什麼區別?
- 21. JavaScript:函數名稱和函數引用有什麼區別?
- 22. 使用移調有什麼區別?
- 23. NumPy數組和簡單Python數組有什麼區別?
- 24. 函數getAddUrl和getAddToCartUrl有什麼區別?
- 25. Crypt ...和CP ...函數有什麼區別?
- 26. round()和trunc()函數有什麼區別?
- 27. setInformativeText和setText函數有什麼區別?
- 28. $ get和$ find函數有什麼區別?
- 29. NtFsControlFile()和DeviceIoControl()函數有什麼區別?
- 30. 正常函數調用和signal()系統調用有什麼區別?