javascript - jQuery - Calling .trigger('click') vs .click()

Question

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()?

Answer 1

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.

Answer 2

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.