JavaScript：什麼是addEventListener？

這是什麼功能？沒有找到任何好的例子。JavaScript：什麼是addEventListener？

2010-04-23 Strawberry

Google給我的第一個鏈接就是一個很好的例子...... https://developer.mozilla.org/en/DOM/element.addEventListener – 2010-04-23 02:37:12

'沒有找到任何好的例子。你看起來了嗎？ – SLaks 2010-04-23 02:39:56

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);

延伸閱讀：

來源

2010-04-23 02:23:54

丹尼爾，什麼時候'節點[「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來自同一頁面的代碼。

來源

2010-04-23 02:33:03 thomasrutter

豎起大拇指來解釋我們爲什麼使用它，而不僅僅是它是什麼。 – kiwicomb123 2016-12-22 05:35:06

JavaScript：什麼是addEventListener？

回答

相關問題