为什么我得到TypeError：obj.addEventListener不是一个函数？

Question

这里是我的代码：

function addEvent(obj, type, fn) { 
    if (obj.attachEvent) { 
    obj['e'+type+fn] = fn; 
    obj[type+fn] = function(){obj['e'+type+fn](window.event);} 
    obj.attachEvent('on'+type, obj[type+fn]); 
    } else 
    obj.addEventListener(type, fn, false); 
} 

function alertWinner(){ 
    alert("You may be a winner!"); 
} 

function showWinner(){ 
    var aTag = document.getElementsByTagName("a"); 
    addEvent(aTag, 'click', alertWinner); 
} 

showWinner(); 

基本上，我在Firebug控制台的工作，并试图得到一个警报被点击任何一个标签时弹出。

我无法看到导致此问题无法正常工作的问题，并给出了我的问题标题（在Firebug中查看）中指出的错误。任何人？

Answer 1

document.getElementsByTagName返回DOM元素的NodeList。每个元素都有一个addEventListener函数，但该数组没有。

遍历它：

function showWinner(){ 
    var aTags = document.getElementsByTagName("a"); 
    for (var i=0;i<aTags.length;i++){ 
     addEvent(aTags[i], 'click', alertWinner); 
    } 
} 

Answer 2

aTag是DOMNodeList一个实例，而不是从DOMElement。

你可以这样做，而不是：

var aTags = document.getElementsByTagName("a"); 
var aTag = aTags[0]; 

但很明显这种方法存在一个缺陷，在可能有不止一个a元素返回。如果可能，您应该使用不同的选择器，只返回一个元素。

Answer 3

不知道为什么，但我在Firefox中获得addEvent is not defined。我甚至无法在MDN上找到addEvent()。我不得不用这个：

function showWinner(){ 
    var aTags = document.getElementsByTagName("a"); 
    for (var i=0;i<aTags.length;i++){ 
     // addEvent(aTags[i], 'click', alertWinner); 
     aTags[i].addEventListener("click", alertWinner); 
    } 
}