Различные способы обработки клика

Question

В основном есть несколько опций для захвата событий "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, так что это может усложнить ситуацию, когда в этом нет необходимости.

Answer 1

Лучшим будет:

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

Подробнее здесь: http://api.jquery.com/on/

Answer 2

Я не знаю, есть ли концептуально лучший подход в тех, которые вы выставляете. Это больше зависит от контекста.

• Если вы хотите прикрепить обработчик событий только к кнопкам, то все в порядке:

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