Почему «щелчок», «делегат» и «живой» ведут себя по-разному с точки зрения всплытия событий с использованием jQuery? - PullRequest
Новая
       32

Почему «щелчок», «делегат» и «живой» ведут себя по-разному с точки зрения всплытия событий с использованием jQuery?

1 голос
/ 26 декабря 2011

Я написал пример программы на JavaScript для демонстрации запутанно различного поведения всплывающих событий в функции jQuery, click, delegate и live.

Вот демо-страница ,

Для каждой функции есть оболочка и ссылка click в оболочке, обе из которых зарегистрированы в функциях события щелчка.

Я заметил, что

  1. Использование stopPropagation в live и delegate не предотвращает всплытие событий
  2. В live и delegate, событие click в оболочкесрабатывает первым, а нажмите ссылку затем.Однако этот порядок для функции click обратный.

Кто-нибудь может объяснить эти два явления?

В примере используется jQuery 1.6.4, но вы можете настроить версию.

Ответы [ 2 ]

2 голосов
/ 26 декабря 2011

Для начала live устарела в пользу для и делегата в jQuery 1.7+.Я бы прекратил использовать live сейчас, а не позже.Связанные выше документы на самом деле очень информативны и прекрасно объясняют, как работают эти функции.

Делегирование и работа в обоих случаях зависят от пузырей.Вот чем они отличаются от клика.Событие вспыхнуло для них.Делегат лучше живого, потому что вы говорите ему контролировать конкретного родителя, в то время как живые пузыри полностью доходят до уровня документа.Очень дорого.

Документацию по jQuery стоит цитировать здесь:

Поскольку метод .live () обрабатывает события, когда они распространяются в верхнюю часть документа, невозможно остановить распространениеживых событий.Аналогично, события, обрабатываемые .delegate (), распространяются на элементы, которым они делегированы;обработчики событий, связанные с любыми элементами ниже этого в дереве DOM, уже будут выполнены к тому времени, когда будет вызван делегированный обработчик событий.Таким образом, эти обработчики могут предотвратить запуск делегированного обработчика, вызвав event.stopPropagation () или вернув false.

1 голос
/ 26 декабря 2011

Если вы понимаете реализацию live и делегата, вы поймете причину этой разницы.Live и делегирование некоторым образом не привязаны к элементу, потому что элемент не существует во время привязки, они прикреплены либо к корню, либо к определенному родительскому элементу соответственно, и, следовательно, к разнице.И они используют всплывающее сообщение о событии, так что, когда событие переходит от дочернего к корню или конкретному родительскому элементу, оно выполняется для вновь добавленного элемента, см. Эту запись в блоге для подробного просмотра этого:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

...