Question

Basically there are multiple options to catch “onclick” events with javascript.

The html:

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

The following few jQuery options:

<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>

Now they all look the same and they are probably not really faster than one another. So which of these three would be the “best” approach or maybe there is a better way?

I know you can do this with just javascript, but I plan on using jQuery anyway so it might complicate things when it doesn’t have to.

Answer 1

Best one would be :

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

More info here : http://api.jquery.com/on/