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

Question

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

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

Answer 1

С Документах по http://api.jquery.com/triggerHandler/

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

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

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

• While .trigger() будет работать на все элементы совпавшего объекта JQuery , .triggerHandler() влияет только первый элемент.

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

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

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

• Вместо возвращения объекта JQuery (чтобы цепочки), .triggerHandler() возвращает то, значение было возвращено последним обработчиком , которое оно было выполнено. Если нет обработчиков не срабатывает, он возвращает неопределенные

Это одна должно быть самостоятельные поясняющим, а также ...

Answer 2

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

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

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

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

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

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

Answer 3

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

// Пример1 для триггера. Все три события нажатия кнопки запускаются при использовании триггера. // Попробуйте заменить триггерный метод 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() для события элемента, родное событие не будет вызываться для этого элемента. trigger() будет работать нормально.

// Пример:

// триггер с заменой 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: триггера() возвращает объект Jquery, тогда как triggerHandler() возвращает последнее значение дескриптора или Если нет обработчики не срабатывают, он возвращает неопределенное значение

// 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», если вы хотите, чтобы ответить на результат возвращается обработчиком.