tại sao tôi nhận được TypeError: obj.addEventListener không phải là một hàm?

Question

Dưới đây là mã của tôi:

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

Về cơ bản, tôi đang làm việc trong bảng điều khiển firebug và cố gắng để có được một cảnh báo để bật lên khi bất kỳ một thẻ được nhấp.

Tôi không thể thấy sự cố dẫn đến việc này không hoạt động và cho tôi lỗi được nêu trong tiêu đề câu hỏi của tôi (xem trong firebug). Có ai không?

Answer 1

document.getElementsByTagName trả về NodeList các phần tử DOM. Mỗi phần tử có hàm addEventListener nhưng mảng không có.

Vòng qua nó:

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

Answer 2

aTag là một thể hiện của DOMNodeList, không phải từ DOMElement.

Bạn có thể làm điều này thay vì:

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

Nhưng rõ ràng là phương pháp này trình bày một lỗ hổng, trong đó có thể có nhiều hơn một a yếu tố trả lại. Bạn nên sử dụng bộ chọn khác chỉ trả lại một phần tử, nếu có thể.

Answer 3

Không chắc chắn lý do nhưng tôi nhận được addEvent is not defined trong Firefox. Tôi thậm chí không thể tìm thấy addEvent() trên MDN. Tôi đã phải sử dụng điều này:

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