Разница между функциями jQuery `click`,` bind`, `live`,` delegate`, `trigger` и` on` (с примером)?

Ответ 1

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

Запуск - для обновленного вопроса

Доступны две основные функции запуска событий-событий, они попадают под одну и ту же категорию "Attackment Handler Attachment" в 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(), но это достойная иллюстрация намерения)

Ответ 2

Первые два эквивалентны.

// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } ); 

Второй, тем не менее, можно использовать для одновременного связывания с несколькими событиями, указав несколько имен событий, разделенных пробелами:

$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } ); 

Более интересен метод .live. Рассмотрим следующий пример:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").click( function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

После выполнения второй строки script вторая ссылка также будет иметь класс CSS "myLink" . Но у него не будет обработчика событий, потому что у него не было класса, когда было добавлено событие.

Теперь подумайте, что вы хотите, чтобы это было наоборот: каждый раз, когда ссылка с классом "myLink" появляется где-то на странице, вы хотите, чтобы она имела тот же обработчик событий автоматически. Это очень часто встречается, когда у вас есть какие-то списки или таблицы, где вы динамически добавляете строки или ячейки, но хотите, чтобы все они вели себя одинаково. Вместо того, чтобы все время перенаправлять обработчики событий заново, вы можете использовать метод .live:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").live( "click", function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

В этом примере вторая ссылка также получит обработчик события, как только он получит класс "myLink" . Магия!: -)

Конечно, это не тот буквальный. То, что .live действительно делает, - это привязать обработчик не к самому указанному элементу, а к самому корню дерева HTML (элемент body). События в DHTML имеют эту забавную функцию "пузыриться". Рассмотрим это:

<div> <a> <b>text</b> </a> </div>

Если вы нажмете "текст", сначала сначала <b> элемент получит событие "click". После этого <a> элемент получит событие "click". И после этого <div> элемент получит событие "click". И так далее - вплоть до <body> элемент. И тогда, когда jQuery поймает событие и посмотрит, есть ли какие-либо "живые" обработчики, которые применяются к элементу, вызвавшему событие в первую очередь. Ухоженная!

И, наконец, метод .delegate. Он просто берет всех детей вашего элемента, которые соответствуют данному селектору, и присоединяют к ним "живой" обработчик. Посмотрите:

$("table").delegate( "td", "click", function() { alert( "Click!" ); } );

// Is equivalent to:
$("table").each( function() {
    $(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );

Вопросы?

Ответ 3

Как и в jQuery 1.7, метод .live() устарел. Если вы используете версию jQuery < 1.7, чем официально рекомендуется использовать .delegate() над .live().

.live() теперь заменяется на .on().

Лучше всего перейти непосредственно на сайт jQuery для получения дополнительной информации, но вот текущие версии метода .on():

.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

http://api.jquery.com/on/

Ответ 4

$().click(fn) и $().bind('click', fn) идентичны с первого взгляда, но версия $.bind более мощна по двум причинам:

• $().bind() позволяет назначить один обработчик нескольким событиям, например $().bind('click keyup', fn).
• $().bind() поддерживает события с расширением имен - мощная функция, если вы хотите удалить (отменить) только определенные обработчики событий, к которым привязан элемент, - читайте больше в События с именами.

Live vs delegate: на другие ответы уже ответил.

Ответ 5

Это поможет чтение API. Тем не менее, я знаю, что у меня на голове, поэтому вы можете продолжать лениться (yay!).

$('#something').click(fn);
$('#something').bind('click',fn);

Здесь нет разницы (что я знаю). .click является просто удобством/вспомогательным методом для .bind('click'

// even after this is called, all <a>s in
// <div class="dynamic_els"> will continue
// to be assigned these event handlers

$('div.dynamic_els a').live(‘click’,fn);

Это совсем другое, поскольку .live добавляет события в селектор, который вы передаете (который у вас здесь нет) и продолжает смотреть на DOM по мере того, как вставляются/удаляются узлы

$('#some_element').delegate('td','click',fn);

Это отличается только тем, что вы назначаете обработчики событий. .delegate сосредоточен на пузырьках событий DOM. Основной принцип заключается в том, что каждое событие пузырится вверх по дереву DOM до тех пор, пока оно не достигнет корневого элемента (document или window или <html> или <body>, я точно не помню).

В любом случае вы привязываете обработчик onclick ко всем <td> внутри $('#some_element') (вы должны указать селектор, хотя вы можете сказать $(document)). Когда один из его детей щелкнут, событие пузырится до <td>. Затем вы можете извлечь исходный элемент события (который jQuery делает для вас автоматически).

Это полезно, когда есть множество элементов, и у вас есть только несколько (или одна центральная) точка [s], в которой эти события пройдут. Это экономит усилия и память браузера, чтобы объединить эти обработчики событий в меньшие объекты.