Отличия trigger() и triggerHandler() в jQuery

Эти методы позволяют запускать обработчики определенных событий, привязанных к соответствующим элементам. Рассмотрим, чем они отличаются.

.triggerHandler( 'event' ) не вызывает .event() на элементе, .trigger( 'event' ) — вызывает

<input type="text"> <script> $(function() { $( "input" ).focus(function() { console.log('focus'); }); $( "input" ).trigger( "focus" ); // "focus" в консоли, текстовое поле получит фокус $( "input" ).triggerHandler( "focus" ); // "focus" в консоли, но текстовое поле не получит фокус }) </script>

.triggerHandler() обрабатывает только первый соответствующий элемент, trigger() — все элементы

<button id="button1">button1</button> <button id="button2">button2</button> <script> $("#button1").click(function(){ console.log('button 1'); }); $("#button2").click(function(){ console.log('button 2'); }); $("#button1, #button2").triggerHandler("click"); // "button 1" в консоли $("#button1, #button2").trigger("click"); // "button 1", "button 2" в консоли </script>

События, генерируемые .triggerHandler() не всплывают выше по иерархии DOM, генерируемые .trigger() — всплывают

<div id="outer"> <div id="inner"></div> </div> <script> $(function() { $("#outer").click(function(){ console.log('outer click'); }); $("#inner").click(function(){ console.log('inner click'); }); $("#inner").trigger('click'); // "inner click", "outer click" в консоли $("#inner").triggerHandler('click'); // "inner click" в консоли }); </script>

.triggerHandler() возвращает значение из последнего обработчика, или undefined, .trigger() возвращает jQuery объект

<button id="button">Button</button> <script> $(function() { $("#button").click(function(){ return 5; }); var result = $("#button").trigger('click'); result.css('color', 'green'); // изменить цвет кнопки var result = $("#button").triggerHandler('click'); console.log(result); // 5 }); </script>