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();
});

Ответ 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 (следуйте за своим родителем, пока вы не сможете больше)