這是什麼功能?沒有找到任何好的例子。JavaScript:什麼是addEventListener?
回答
addEventListener
方法是W3C standard method將事件處理程序附加到元素,以便您可以在觸發事件時執行一些有用的操作。點擊id爲my_image_id
元素時,下面的例子會彈出一個警告消息:
function doSomething() {
alert('Image clicked');
}
var myImage = document.getElementById('my_image_id');
myImage.addEventListener('click', doSomething, false);
不幸的是,這並不在Internet Explorer中工作,因爲微軟採用了不同的事件註冊模型。在Internet Explorer 5+,你就必須附上事件處理程序如下:
myImage.attachEvent('onclick', doSomething);
因此,對於一個跨瀏覽器的事件註冊方法,你可以使用反射和有條件地執行:
function addEventHandler(node, type, f) {
if (node.addEventListener) {
node.addEventListener(type, f, false);
}
else if (node.attachEvent) {
node.attachEvent("on" + type, f);
}
else {
node["on" + type] = f;
}
}
var myImage = document.getElementById('my_image_id');
addEventHandler(myImage, 'click', doSomething);
延伸閱讀:
丹尼爾,什麼時候'節點[「on」+ type] = f;'來用。前兩種情況是否足夠? – 2013-09-20 03:18:37
丹尼爾, 但在Chrome或IE中無法工作。 我需要一個框架來使用這個功能嗎? 爲了這個工作,我必須在該標籤中添加'onload ='addEventHandler(this,'click',doSomething);「'在該元素上添加一個'click'事件。 – 2013-09-20 06:22:48
您可能熟悉添加的事件處理程序是這樣的:
window.onload = function() {
alert('onload event!');
};
,甚至在HTML這樣的:
<body onload="alert('onload event!')">
好了,這樣做的缺點是,你只能有一個事件處理程序。因此,如果其他事件稍後覆蓋該「onload」屬性,則不再使用先前的事件處理程序。
的addEventListener是不覆蓋前一個註冊的事件處理程序的方式。它受Internet Explorer以外的大多數瀏覽器的支持。不用擔心,因爲Internet Explorer有自己的等效功能:attachEvent。
下面是其使用的(簡體)例如:
if (myelement.addEventListener) {
// other browsers
myelement.addEventListener(eventname, callback, false);
}
else {
myelement.attachEvent("on"+eventname, callback);
}
它通常是一個更好的主意來註冊使用addEventListener或的attachEvent方法比在onload/onsomething財產的事件,因爲它不會有可能破壞任何其他JavaScript來自同一頁面的代碼。
豎起大拇指來解釋我們爲什麼使用它,而不僅僅是它是什麼。 – kiwicomb123 2016-12-22 05:35:06
- 1. Javascript keypress addEventListener
- 2. JavaScript addEventListener windows.onload organization
- 3. 的addEventListener的JavaScript
- 4. Javascript AddEventListener問題
- 5. 什麼是javascript:;?
- 6. 爲什麼Javascript addEventListener更改對象指針的範圍?
- 7. 爲什麼這兩個javascript調用addEventListener有不同的結果
- 8. JavaScript addEventListener爲什麼它不會在這裏冒泡?
- 9. document.images上的JavaScript addEventListener
- 10. JavaScript addEventListener:'input'與'keyup'
- 11. JavaScript對象:'addEventListener不是函數'
- 12. 爲什麼這個addEventListener函數失敗?
- 13. 爲什麼addEventListener不聽我說?
- 14. 爲什麼addEventListener不能正常工作?
- 15. 爲什麼不能使用addEventListener方法
- 16. 使用addEventListener有什麼區別?
- 17. 是什麼在JavaScript
- 18. 什麼是在JavaScript
- 19. 是什麼以JavaScript
- 20. 什麼是JavaScript的
- 21. 是什麼在Javascript
- 22. 什麼是href = javascript :;
- 23. 什麼是javascript prototype.constructor?
- 24. 什麼是JavaScript中
- 25. 什麼是!在JavaScript?
- 26. 什麼是JavaScript庫?
- 27. 什麼是JavaScript的
- 28. addEventListener傳遞給我的函數的參數是什麼?
- 29. 什麼是string.indexOf(「*。」)在Javascript中做什麼?
- 30. HTML/Javascript addEventListener不能調用?
Google給我的第一個鏈接就是一個很好的例子...... https://developer.mozilla.org/en/DOM/element.addEventListener – 2010-04-23 02:37:12
'沒有找到任何好的例子。你看起來了嗎? – SLaks 2010-04-23 02:39:56