JQuery event bubbling
Я хочу понять, как точно интерпретировать пузыри. Означает ли это, что вы поднимаете иерархию кода HTML или что-то еще?
Во-вторых, я проходил , и я не мог понять последнюю часть, где он говорит
Обработчик кликов на основе P прослушивает событие клика, а затем предотвращает его распространение (раздувание)
Что это значит?
Ответы
Ответ 1
return false;
предотвратит "пузырение". Он использовался для остановки действий по умолчанию, таких как проверка флажка, открытие выбора, клика и т.д.
Чтобы остановить выполнение дополнительных обработчиков после одной привязки с помощью .live(), обработчик должен вернуть false. Вызов .stopPropagation() не будет выполните это.
Из Предостережения в jQuery.live()
Рассуждение (спасибо @AlienWebguy):
Причина stopPropagation()
не работает с live()
заключается в том, что live()
связывает событие с документом таким образом, что к тому времени, когда он срабатывает, там нет другого места для его распространения.
Ответ 2
Концепция "bubbling up" похожа, если у вас есть дочерний элемент с событием клика, и вы не хотите, чтобы он вызывал событие щелчка родителя. Вы можете использовать event.stopPropagation()
.
event.stopPropagation()
в основном говорит только применить это событие click к THIS CHILD NODE и не сообщать родительским контейнерам ничего, потому что я не хочу, чтобы они реагировали.
Захват событий:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
Событие Bubbling:
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
Если вы используете live()
или delegate()
, вам нужно return false;
, хотя это может и не сработать. Прочтите приведенную ниже цитату.
Per jQuery docs:
Так как метод .live() обрабатывает события, как только они распространяются на в верхней части документа невозможно прекратить распространение живые события. Точно так же события, обрабатываемые .delegate(), будут распространяться к элементам, которым они делегированы; обработчики событий, привязанные к любые элементы под ним в дереве DOM уже выполнены к тому времени, когда вызывается делегированный обработчик событий. Эти обработчики, следовательно, может помешать делегированному обработчику вызов event.stopPropagation() или возврат false.
В прошлом это была проблема платформы, у Internet Explorer была пузырящая модель, а Netscape - больше о захвате (все же поддерживались оба).
модель W3C требует, чтобы вы могли выбрать, какой из них вы хотите.
Я думаю, что пузырение является более популярным, потому что, как заявлено, есть некоторые платформы, которые поддерживают только пузырь... и это похоже на режим "по умолчанию".
Какой из них вы выбираете, в значительной степени является продуктом того, что вы делаете, и что имеет смысл для вас.
Дополнительная информация http://www.quirksmode.org/js/events_order.html
Еще один отличный ресурс: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
Ответ 3
В нем говорится, что метод live ()
присоединяет обработчик к элементу document
и проверяет target
события, чтобы узнать, откуда он. Если цель соответствует селектору, то он запускает eventHandler. Все, что покоится на пузырьковой системе событий.
В примере обработчик кликов на элементе p
, ведьма является предком элемента a
, отмените пузырьки, вернув false
. Тогда элемент document
никогда не получит событие, поэтому он не инициирует обработчик событий.
Ответ 4
В приведенном ниже примере он прикрепляет событие click для привязки с идентификатором "anchor". Этот якорь находится в div, который также имеет прикрепленное событие щелчка. Если мы нажмем на этот якорь, это будет так хорошо, как мы нажимаем на содержащий div. Теперь, если мы хотим сделать что-то на этом якорь, щелкните, но не хотите, чтобы стрелка div была уволена, мы можем остановить событие, как показано ниже.
<div id="div">
<a href="google.com" id="anchor"></a>
</div>
$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.
//Do stuff here
});
$("#anchor").click(function(e){
//Do stuff here
//This line stops the event bubling and
//jquery has abstracted it in the event object to make it cross browser compatible.
e.stopPropagation();
});
Ответ 5
также:
event.stopPropagation()
http://api.jquery.com/event.stopPropagation/
Ответ 6
Да, событие идет вверх по дереву, и если какой-либо элемент имеет обработчик для этого события, он будет вызван.
Добавив return:false
в обработчик одного из элементов, событие будет предотвращено пузырьками.
Ответ 7
Эти две ссылки содержат четкое и подробное объяснение пузырьков событий (а также общепринятых концепций событий).
http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/
Из первой ссылки
Событие будет инициировано для элемента a
, а также для всех элементы, содержащие a
- вплоть до document
Из второго канала
<div>
<h1>
<a href="#">
<span>Hello</span>
</a>
</h1>
</div>
Предположим, что мы нажимаем на span, что приводит к запуску события клика на пролете; пока ничего революционного. Тем не менее, событие затем распространяется (или пузыри) на родительский элемент span (the), и на него запускается событие click. Этот процесс повторяется для следующего родителя (или предка) до элемента документа.
Теперь оставьте все это в контексте DOM. DOM - это дерево... и каждый элемент является node в дереве DOM. Bubbling - это просто обход node, some element
к корню node, document
(следуйте за своим родителем, пока вы не сможете больше)