的addEventListener調用函數沒有我，甚至要求它

Question

所以我們有一個頁面：

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

而且要添加一些單擊事件：

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

就像一個魅力！但是，當您使第二個參數爲外部函數時：

function message_me(m_text){ 
    alert(m_text) 
} 

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

它立即調用該函數。我怎樣才能阻止呢？很煩人！

這裏有一個現場演示：http://jsfiddle.net/ey7pB/1/

Answer 1

function message_me(m_text){ 
    alert(m_text) 
} 

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

這裏有一個更新的fiddle。

Answer 2

由於第二個參數需要功能參考，您需要提供一個。有了你有問題的代碼，你立即調用該函數，並通過其結果（這是undefined ...因爲所有功能確實是alert並且不返回任何東西）。要麼在一個匿名函數中調用函數（就像你的第一個例子），要麼改變函數返回一個函數。

你可以這樣做：

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

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

或本：

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

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

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

Answer 3

，或者您可以使用.bind

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

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

檢查MDN Documentation 約'關閉'