dlaczego otrzymuję TypeError: obj.addEventListener nie jest funkcją?

Question

Oto mój kod:

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

Zasadniczo pracuję w konsoli Firebug i próbuje alert do pop-up, gdy każdy tag kliknięcia.

Nie widzę problemu, który powoduje, że to nie działa i daje mi błąd określony w tytule mojego pytania (oglądany w firebug). Ktoś?

Answer 1

document.getElementsByTagName zwraca NodeList elementów DOM. Każdy element ma funkcję addEventListener, ale tablica nie ma żadnej.

pętli nad nim:

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

Answer 2

aTag jest wystąpienie DOMNodeList nie z DOMElement.

Można to zrobić w zamian:

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

Ale oczywiście to podejście prezentuje wadę, że nie może być więcej niż jeden a elementem zwrócone. Powinieneś użyć innego selektora, który zwraca tylko jeden element, jeśli to możliwe.

Answer 3

Nie jestem pewien dlaczego, ale mam addEvent is not defined w przeglądarce Firefox. Nie mogłem nawet znaleźć addEvent() na MDN. Musiałem użyć tego:

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