Прежде чем вы прочитаете это, вытащите этот список событий на другой странице, сам API чрезвычайно полезен, и все, что я обсуждаю ниже, связано непосредственно с этой страницы .
Во-первых, .click(function) буквально является сокращением для .bind('click', function), они эквивалентны. Используйте их при привязке обработчика непосредственно к элементу , например:
$(document).click(function() {
alert("You clicked somewhere in the page, it bubbled to document");
});
Если этот элемент заменить или выбросить, этого обработчика больше не будет. Также элементы, которых не было , когда этот код был запущен для присоединения обработчика (например, селектор нашел его), не получат обработчик.
.live() и .delegate() аналогично связаны, .delegate() фактически использует .live() внутренне, они оба слушать события, чтобы пузыриться. Это работает для новых и старых элементов , они всплывают события одинаково. Вы используете их, когда ваши элементы могут измениться, например, добавление новых строк, элементов списка и т. д. Если у вас нет родителя / общего предка, который останется на странице и не будет заменен в любой момент, используйте .live(), например:
$(".clickAlert").live('click', function() {
alert("A click happened");
});
Если, однако, у вас есть родительский элемент где-то, который не заменяется (поэтому его обработчики событий не прощаются), вы должны обработать его с помощью .delegate(), например так:
$("#commonParent").delegate('.clickAlert', 'click', function() {
alert("A click happened, it was captured at #commonParent and this alert ran");
});
Это работает почти так же, как .live(), но событие вспыхивает меньше раз, прежде чем оно будет захвачено и обработчики выполнены. Еще одно распространенное использование обоих: говорят, что ваш класс изменяется на элементе, больше не совпадающем с селектором, который вы изначально использовали ... с этими методами селектор оценивается во время события , если он совпадает , обработчик запускается ... поэтому элемент больше не соответствует селектору, он больше не будет выполняться. Однако с .click() обработчик событий привязан прямо к элементу DOM, тот факт, что он не соответствует тому селектору, который использовался для его нахождения, не имеет значения ... событие привязано и остается пока этот элемент не исчезнет или обработчик не будет удален с помощью .unbind().
Еще одно распространенное использование для .live() и .delegate() - это производительность . Если вы имеете дело с лотами элементов, присоединение обработчика щелчков непосредственно к каждому элементу является дорогостоящим и длительным. В этих случаях более экономичным является установка обработчика single , и пусть пузырьки делают всю работу, взгляните на этот вопрос, где он имеет огромное значение , это хороший пример применения .
Запуск - для обновленного вопроса
Доступны 2 основные функции запуска обработчика событий, они подпадают под одну и ту же категорию «Присоединение обработчика событий» в API , это .trigger() и .triggerHandler(). .trigger('eventName') имеет несколько встроенных ярлыков для общих событий, например:
$().click(fn); //binds an event handler to the click event
$().click(); //fires all click event handlers for this element, in order bound
Вы можете просмотреть список, включающий эти ярлыки здесь .
Что касается разницы, .trigger() запускает обработчик событий (но большую часть времени это не действие по умолчанию, например, установка курсора в нужное место в нажатом <textarea>). Это приводит к тому, что обработчики событий происходят в том порядке, в котором они были связаны (как и собственное событие), запускают собственные действия события и всплывают DOM.
.triggerHandler() обычно для другой цели, здесь вы просто пытаетесь запустить привязанный обработчик (и), это не приводит к возникновению нативного события, например отправка формы. Он не накапливает DOM и не является цепным (он возвращает то, что возвращает обработчик события последней привязки для этого события). Например, если вы хотите вызвать событие focus, но не сфокусировать объект, вы просто хотите запустить код, связанный с .focus(fn), это будет сделано, тогда как .trigger() будет делать это так же, как на самом деле фокусировать элемент и пузыриться.
Вот пример из реального мира:
$("form").submit(); //actually calling `.trigger('submit');`
Это будет запускать любые обработчики отправки, например, плагин проверки jQuery , затем попытаться отправить <form>. Однако, если вы просто хотели проверить, так как он подключен через обработчик событий submit, но не отправлял <form> впоследствии, вы можете использовать .triggerHandler('submit'), например :
$("form").triggerHandler('submit');
Плагин предотвращает отправку формы обработчиком путем бомбардировки, если проверка валидации не проходит, но с этим методом нам все равно, что он делает. Независимо от того, была ли она прервана или нет, мы не пытаемся отправить форму, мы просто хотели вызвать ее для повторной проверки и больше ничего не делать. ( Отказ от ответственности: Это избыточный пример, поскольку в плагине есть метод .validate(), но это достойная иллюстрация намерений)