addEventListener gọi hàm mà không có tôi thậm chí yêu cầu nó để

Question

Vì vậy, chúng tôi có một trang:

<span id='container'> 
    <a href='#' id='first'>First Link</a> 
    <a href='#' id='second'>Second Link</a> 
</span> 

Và muốn thêm một số sự kiện nhấp chuột:

first.addEventListener('click', function(){alert('sup!');}) 

trình như một say mê! Tuy nhiên, khi bạn đặt đối số thứ hai là hàm ngoài:

function message_me(m_text){ 
    alert(m_text) 
} 

second.addEventListener('click', message_me('shazam')) 

Nó gọi hàm ngay lập tức. Làm thế nào tôi có thể ngăn chặn điều này? Rất khó chịu!

Dưới đây là một bản demo trực tiếp: http://jsfiddle.net/ey7pB/1/

Answer 1

function message_me(m_text){ 
    alert(m_text) 
} 

second.addEventListener('click', 
    function() { 
     message_me('shazam'); 
    } 
); 

Dưới đây là một cập nhật fiddle.

Answer 2

Do tham số thứ hai mong đợi một hàm tham chiếu , bạn cần cung cấp một tham số. Với mã có vấn đề của bạn, bạn sẽ ngay lập tức gọi hàm này và chuyển kết quả (là undefined ... bởi vì tất cả hàm hoạt động là alert và không trả về bất kỳ thứ gì). Hoặc gọi hàm trong một hàm ẩn danh (như ví dụ đầu tiên của bạn) hoặc thay đổi hàm để trả về một hàm.

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

function message_me(m_text){ 
    alert(m_text); 
} 

second.addEventListener('click', function() { 
    message_me('shazam') 
}); 

hay này:

function message_me(m_text){ 
    return function() { 
     alert(m_text); 
    }; 
} 

second.addEventListener('click', message_me('shazam')); 

DEMO:http://jsfiddle.net/tcCvw/

Answer 3

hoặc bạn có thể sử dụng .bind

function message_me(m_text){ 
    alert(m_text); 
} 

second.addEventListener('click', message_me.bind(this, 'shazam')); 

kiểm tra MDN Documentation về 'bao đóng'