Разница между функциями jQuery `click`,` bind`, `live`,` делегат`, `trigger` и` on` (с примером)?
4 ответа
Прежде чем вы это прочитаете, перетащите этот список событий на другую страницу, сам 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); //binds an event handler to the click event
$().click(); //fires all click event handlers for this element, in order bound
Вы можете просмотреть список, включающий эти ярлыки, здесь .
Что касается разницы, то .trigger () запускает обработчик событий (но не действие по умолчанию большую часть времени, например, размещение курсора в нужном месте на