triggerHandler против триггера в jQuery

Question

Из любопытства - какова цель / варианты использования для jQuery triggerHandler? Насколько я могу судить, единственное «реальное» различие между trigger и triggerHandler заключается в том, запускается или нет нативное событие, и в поведении всплывающих событий (хотя поведение всплывающего triggerHandler не кажется трудным для воспроизведения с trigger в еще нескольких строках кода). В чем преимущество того, что родное событие не запускается?

Мне любопытно, если это удобная функция или есть более глубокая причина, по которой она существует, и что, почему / когда я бы ее использовал.

Answer 1

Из документов на http://api.jquery.com/triggerHandler/

Метод .triggerHandler () ведет себя аналогично .trigger (), с следующие исключения:

• Метод .triggerHandler () не вызывает поведение по умолчанию событие (например, форма представление).

Не запрещая действия браузера по умолчанию, вы можете указать действие, которое происходит в фокусе, или выбрать, и т. Д. И т. Д., Которые применяют стиль. Возможно, у вас есть динамическое меню, основанное на Javascript, поэтому вы не хотите применять стиль исключительно с помощью CSS, иначе те, у кого отключен Javascript, не поймут, почему макет выглядит странным. Вы можете использовать что-то вроде $('menu1select').triggerHandler('click');

• Хотя .trigger () будет работать со всеми элементами, соответствующими jQuery. object, .triggerHandler () влияет только на первый соответствующий элемент.

Если у вас есть событие, которое, например, скрывает элемент по щелчку, и вы хотите вызывать эту функцию в целом, вместо того, чтобы указывать каждый элемент, вы можете использовать $('.menu').triggerHandler('click');

• События, созданные с помощью .triggerHandler (), не всплывают Иерархия DOM; если они не обрабатываются непосредственно целевым элементом, они ничего не делать.

Предотвращает распространение, надеюсь, не нужно это объяснять ...

• Вместо возврата объекта jQuery (чтобы разрешить цепочку), .triggerHandler () возвращает что угодно значение было возвращено последним обработчиком это должно быть выполнено. Если нет обработчики сработали, он возвращает не определено

Этот тоже должен быть понятен ...

Answer 2

В чем преимущество того, что родное событие не запускается?

• У вас есть действия, связанные с событием 'focus', но вы не хотите, чтобы браузер действительно фокусировал его (может показаться глупым, но это может произойти, не так ли? Как код, который вам нужен выполнить один раз без потери текущего фокуса).

• Компонент, который вы заставляете запускать «загрузку» (просто пример общей вещи) другого компонента, находящегося внутри него.

  В этом случае, если вы вызываете 'load' потомков, когда приходит 'load' родителя, вы не хотите этого делать, потому что это вызовет бесконечный вызов, если event.stopPropagation не вызывается слушатели события 'load' (вызванного буллингом):

$container.on('load', function () {
    $somethingInsideContainer.trigger('load'); 
    // Would cause a loop if no event.stopPropagation() is called
});

В этом случае вам нужно вызвать triggerHandler ().

Answer 3

Разница 1: Вы можете вызвать все элементы, соответствующие объекту JQuery, используя триггер.

// Пример1 для триггера. Все 3 нажатия кнопки запускаются при использовании триггера. // Попробуйте заменить метод триггера на triggerHandler (). Вы увидите только первый обработчик события элемента кнопки.

<button id = "button1">button1</button>
<button id = "button2">button2</button>
<button id = "button3">button3</button>

$("#button1").on("click", function(){
alert("button1 clicked");
});
$("#button2").on("click", function(){
alert("button2 clicked");
});
$("#button3").on("click", function(){
alert("button3 clicked");
});

// заменим триггер на triggerHandler, чтобы увидеть разницу

$("#button1, #button2, #button3").trigger("click");

Разница 2: при использовании triggerHandler () для события элемента, собственное событие не будет вызываться для этого элемента. Триггер () будет работать нормально.

// Пример:

// заменить триггер на triggerHandler, чтобы увидеть разницу

 <button id = "button1">button1</button>
  <button id = "button2">button2</button>

$("#button1").on("click", function(){
 $("#button2").trigger('click');

});

$("#button3").on("click", function(){
var value = $("#button2").triggerHandler('click');
    alert('my value:'+ value)
});

$("#button2").on('click', function(){
alert("button2 clicked");

});

Разница 3: trigger () возвращает объект Jquery, тогда как triggerHandler () возвращает последнее значение дескриптора или, если никакие обработчики не запущены, он возвращает undefined

// Example3

<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>


$("#button1").on("click", function(){
var myValue = $("#button2").trigger('click');
    alert(myValue);
});

$("#button3").on("click", function(){
var value = $("#button2").triggerHandler('click');
    alert('my value:'+ value)
});

$("#button2").on('click', function(){
alert("button2 clicked");
    return true;
});

Другая разница

События, вызванные triggerHandler (), не всплывают в иерархии DOM; если они не обрабатываются целевым элементом напрямую, они ничего не делают.

Answer 4

Для меня главное отличие в том, что «triggerHandler» возвращает то, что было возвращено последним обработчиком, тогда как «trigger» возвращает объект jQuery.

Итак, для такого обработчика, как:

  $( document ).on( 'testevent', function ()
  {
    return false;
  });

Используя 'triggerHandler' вы можете сделать следующее:

  if( $( document ).triggerHandler( 'testevent' ) === false )
  {
    return;
  }

Таким образом, вы бы использовали 'triggerHandler', если хотите ответить на результат, возвращаемый обработчиком.