不同的處理方式點擊事件

Question

基本上有多個選項可以用javascript捕捉「onclick」事件。

的HTML：

<div id='menu'> 
    <button>Title</button> 
</div> 

以下幾個jQuery的選擇：

<script> 
var menu = $('#menu'); 
var buttons = menu.find('button').click(menuEvent); 

function menuEvent() { 
    .. 
} 
</script> 

<script> 
var menu = $('#menu'); 
var buttons = menu.find('button'); 

buttons.click(function() { 
    .. 
}); 
</script> 

<script> 
var menu = $('#menu'); 
var buttons = menu.find('button'); 

buttons.get(0).onclick = function() { 
    .. 
}); 
</script> 

現在他們看起來都一樣，他們也有可能不是真的快於彼此。那麼這三者中的哪一個將是「最好」的方法，或者有更好的方法？

我知道你可以用JavaScript做到這一點，但我打算使用jQuery，因此它可能會使事情複雜化，當它不必。

Answer 1

最好的一個是：

buttons.on("click", function(event){ 
// code to run on click 
}); 

此處瞭解詳情：http://api.jquery.com/on/

Answer 2

我不知道是否有概念在你揭露的人一個最好的辦法。它更多取決於上下文。

• 如果你想將事件處理程序附加到只有按鈕，這樣一來OD做的是好的：

  buttons.click(function() { 
      .. 
  }); 
  

• 如果相同的處理程序應該是爲元素的不同羣體共享，您可以分別定義處理程序，並使用不同的羣體：

  function myClickHandler() { 
      ... 
  } 
  
  buttons.click(myClickHandler); 
  otherButtons.click(myClickHandler); 
  

• .on()用於事件代表團。當綁定發生後，應該將事件處理程序添加到DOM中插入的元素時，應該轉向事件委派。基本上，你「綁定」的事件到父容器中，使用選擇到所討論的元件抑制其執行：

  container.on('click', '.button', function() { 
      // will execute when clicking on elements with class .button 
      // present inside the container 
  });