Событие jQuery

Question

Я хочу понять, как именно интерпретировать пузырение.Означает ли это повышение иерархии HTML-кода или что-то еще?

Во-вторых, я проходил пример и не мог понять последнюю часть, где написано

Обработчик щелчков на основе P прослушивает событие click и затем предотвращает его распространение (всплеск)

Что это значит?

Answer 1

Понятие «всплывающее» похоже на то, что если у вас есть дочерний элемент с событием click, и вы не хотите, чтобы он вызывал событие click родительского элемента. Вы можете использовать event.stopPropagation().

event.stopPropagation() в основном говорит, примените только это событие щелчка к Этому УЗЕЛУ РЕБЕНКА и ничего не говорите родительским контейнерам, потому что я не хочу, чтобы они реагировали.

Захват событий:

* * 1010

Событие Bubbling:

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

Если вы используете live() или delegate(), вам потребуется return false;, хотя это может не сработать. Прочитайте цитату ниже.

За 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/

Answer 2

return false;

предотвратит «пузырение». Он используется для остановки действий по умолчанию, таких как установка флажка, открытие выбора, щелчок и т. Д.

Чтобы остановить выполнение следующих обработчиков после одной привязки с помощью .live (), обработчик должен вернуть false. Вызов .stopPropagation () не будет выполнить это.

С Предостережения в jQuery .live () <ч /> Рассуждение (спасибо @AlienWebguy):

Причина, по которой stopPropagation() не работает с live(), заключается в том, что live() связывает событие с документом, поэтому к моменту его запуска больше некуда распространяться.

Answer 3

Что он говорит, так это то, что метод live () присоединяет обработчик к элементу document и проверяет target события, чтобы увидеть, откуда оно происходит. Если цель соответствует селектору, то запускается eventHandler. Все, что покоится в пузырьковой системе событий.

В этом примере обработчик щелчков на элементе p, который является предком элемента a, отменит всплывание, вернув false. Тогда элемент document никогда не получит событие, поэтому он не вызовет обработчик события.

Answer 4

В приведенном ниже примере это прикрепление события click к якорю с идентификатором «anchor».Этот якорь находится внутри div, к которому также прикреплено событие click.Если мы нажимаем на этот якорь, это так же хорошо, как мы щелкаем по содержащему 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();
});

Answer 5

Эти две ссылки дают четкое и подробное объяснение всплесков событий (а также часто используемых концепций событий).

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

С первой ссылки

* * 1010 Событие

будет инициировано как для элемента a, так и для всех элементы, которые содержат a - вплоть до document

Со второй ссылки

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

Предположим, что мы щелкаем промежуток, что вызывает событие щелчка для промежутка; пока ничего революционного. Тем не менее, событие затем распространяется (или всплывает) к родительскому элементу диапазона (), и на нем запускается событие щелчка. Этот процесс повторяется для следующего родителя (или предка) вплоть до элемента документа.

Теперь давайте поместим все это в контекст DOM. DOM - это ... дерево, и каждый элемент является узлом в дереве DOM. Пузырьки - это просто обход узла, some element до корневого узла, document (следуйте за своим родителем, пока не сможете больше)

Answer 6

Да, событие идет вверх по дереву, и если какой-либо элемент имеет обработчик для этого события, оно будет вызвано. При добавлении return:false в обработчик одного из элементов событие не будет пузыриться.

Answer 7

Также:

event.stopPropagation()

http://api.jquery.com/event.stopPropagation/