9

In jQuery what is the better way to trigger an event such as click? Using the .trigger('click') function or calling .click()?

I have always triggered this event by using .click() but suddenly decided maybe I should be using .trigger('click') instead.

I use these event triggers to trigger event listeners created with .on('click', function(){...}).

I have checked the jquery api, searched other stackoverflow posts [ 1 ] [ 2 ] and I can see no reason to use one over the other.

I would be more inclined to use .trigger() to keep all event triggering consistent, as this can be used to call any event including custom events. But it would seem .trigger() does not work in all cases.

What is the best way to trigger an event? .trigger('click') or .click()?

Community
  • 1
  • 1
3dgoo
  • 15,716
  • 6
  • 46
  • 58

2 Answers2

10

If you're using .trigger() you have the advantage of being able to pass additional parameters, whereas .click() must be called without any.

Taken from the documentation:

$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

'Custom' and 'Event' are being passed to the event handler as param1 and param2 respectively

Besides that, the .click() is unlike other functions that implement get / set based on the number of arguments, because it implements trigger / set instead. Using a dedicated .trigger(), to me, is more logical.

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
  • Regarding your last point about `.click()` both registering and triggering click handlers (depending on arguments), I don't disagree, but then the same thing applies to lots of jQuery methods (`.html()`, `.css()`, etc.), so you get used to it pretty fast once you get into jQuery. – nnnnnn Nov 22 '12 at 02:57
  • 1
    @nnnnnn But using that logic, `.click()` should give me the list of event handlers :) – Ja͢ck Nov 22 '12 at 02:59
  • Well if you're going to bring logic into it... (All I'm saying is that, right or wrong, having a method do seemingly opposite things depending on the argument(s) is the jQuery way.) – nnnnnn Nov 22 '12 at 03:05
  • @nnnnnn I've revised my answer though, it's not fair to bring up SRP for a library that aims to be compact; and maybe I've forgotten the other oddities I've come across over the years, but this one just seems to stick out :) – Ja͢ck Nov 22 '12 at 03:23
  • Ha, well, you could look at `.click()` as being singularly responsible for all things click-related - except that of course it's not because you've got `.trigger()`, `.on()`, etc. +1, by the way. – nnnnnn Nov 22 '12 at 03:37
  • sooooo which one is better to use? – Vic Nov 14 '13 at 19:33
  • @Vic My opinion on that matter is clearly indicated in the last paragraph of my answer. – Ja͢ck Nov 17 '13 at 07:33
8

One caveat to be aware of when using the jQuery method is that, in addition to being a jQuery method, .click() is also a DOM Level 2 native JavaScript method that can be called on HTML elements, such as <button> elements.

One place where this can become confusing is if you have a selector like this:

$("#element")[0].click();

There, you are actually calling the method on the DOM element. For instance, if you tried

$("#element")[0].trigger('click');

you would get an error that the element has no trigger method defined.

Be aware that $('#element')[0].click(); won't work in Safari, on certain elements. You will need to use a workaround.

Alex W
  • 37,233
  • 13
  • 109
  • 109