Различни начини за събиране на кликвания - jquery, jquery-click-event

По принцип има няколко възможности да хванете "onclick" събития с javascript.

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, за да може да усложни нещата, когато не е необходимо.

Отговори:

Най-доброто би било:

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

Повече информация тук: http://api.jquery.com/on/

Не знам дали има концептуално а най-доброто подход в тези, които излагате. Това зависи повече от контекста.

• Ако искате да прикачите манипулатор на събития само на бутоните, този начин да направите това е добре:

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

• Ако трябва да бъде един и същ манипулатор споделено за различните групи елементи можете да определите отделно и да използвате различните групи:

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

• .От () е за делегиране на събития. Когато манипулатора на събития трябва да бъде добавен към елементите, вмъкнати в DOM след свързването ви, трябва да се обърнете към делегиране на събития. По принцип "обвързвате" събитието с контейнера-майка, като ограничавате изпълнението му с помощта на селектор към въпросните елементи:

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