Code has been added to clipboard!

Understanding and Using jQuery .triggerHandler() in Your Code

Reading time 1 min
Published Jan 10, 2018
Updated Oct 2, 2019

jQuery triggerHandler: Main Tips

  • The jQuery .triggerHandler() method runs handlers assigned to an element for an event.
  • .trigger() executes handlers on all detected elements. The jQuery .triggerHandler() influences the first matched element.

How .triggerHandler() Work

The .triggerHandler() lets you trigger jQuery handler of the specified event on the selected element.

Example
$("button").click(() => {
    $("input").triggerHandler("select");
});

The syntax for jQuery .triggerHandler() is similar to trigger jQuery method:

$("selector").triggerHandler(event, [parameter1], [parameter2], ..., [parameterN]);

This method takes two parameters:

  • event represents a standard JavaScript event or a custom jQuery.event object.
  • parameter means you may also add multiple parameters to be passed to the event handler function.

Note: unlike the .trigger() jQuery method, .triggerHandler() includes the handler function only, and not the default event behavior.

Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX