Прежде чем вы это прочитаете, перетащите этот список событий на другую страницу, сам 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()- это производительность . Если вы имеете дело с большим количеством элементов, прикрепление обработчика кликов непосредственно к каждому элементу является дорогостоящим и трудоемким. В этих случаях более экономично настроить один обработчик и позволить пузырям делать всю работу, взгляните на этот вопрос, где он имеет огромное значение , это хороший пример приложения.
Запуск - для обновленного вопроса
Доступны 2 основные функции запуска обработчика событий, они подпадают под одну и ту же категорию «Присоединение обработчика событий» в API , это .trigger()и .triggerHandler(). .trigger('eventName')имеет несколько встроенных ярлыков для общих событий, например:
$().click(fn);
$().click();
Вы можете просмотреть список, включающий эти ярлыки, здесь .
Что касается разницы, .trigger()запускает обработчик событий (но не действие по умолчанию большую часть времени, например, размещение курсора в нужном месте при нажатии <textarea>). Это заставляет обработчики событий происходить в том порядке, в котором они были связаны (как и собственное событие), запускает собственные действия событий и всплывает в DOM.
.triggerHandler()обычно для другой цели, здесь вы просто пытаетесь запустить связанный обработчик (-ы), это не приводит к срабатыванию собственного события, например, отправки формы. Он не всплывает в DOM и не объединяется в цепочку (он возвращает то, что возвращает обработчик последнего связанного события для этого события). Например, если вы хотите вызвать focusсобытие, но не сфокусировать объект, вам просто нужно, чтобы код, с .focus(fn)которым вы связаны, запускался, это будет делать это, тогда как .trigger()сделает это, а также фактически сфокусирует элемент и всплывет вверх.
Вот пример из реального мира:
$("form").submit();
Это запустит любые обработчики отправки, например плагин проверки jQuery , а затем попытается отправить файл <form>. Однако, если вы просто хотите проверить, поскольку он подключен через submitобработчик событий, но не отправляет его <form>впоследствии, вы можете использовать .triggerHandler('submit'), например:
$("form").triggerHandler('submit');
Плагин предотвращает отправку формы обработчиком, взрываясь, если проверка не проходит, но с этим методом нам все равно, что он делает. Независимо от того, прервано оно или нет, мы не пытаемся отправить форму, мы просто хотели запустить ее для повторной проверки и больше ничего не делать. ( Отказ от ответственности: это лишний пример, поскольку .validate()в плагине есть метод, но это достойная иллюстрация намерения)