Захват и всплытие с помощью jQuery

Я новичок в jQuery и пытаюсь понять концепцию захвата и всплытия.

Я прочитал много статей, но в большинстве из них описывалось распространение событий для Javascript.

Предположим, у нас есть следующий HTML-код:

<div id="outer">
    outer
    <div id="inner">
        inner
    </div>
</div>

Захват — это фаза, на которой мы спускаемся по элементам DOM, а всплытие — когда мы поднимаемся.

В Javascript вы можете решить, по какому пути следовать (используя параметры true или false):

element.addEventListener('click', doSomething, true) --> capture phase
element.addEventListener('click', doSomething, false) --> bubble phase

Есть ли что-то подобное для jQuery, чтобы обозначить, какой способ следовать, кроме пути JavaScript?

Также jQuery использует фазу по умолчанию? Например пузырь?

Потому что я использовал следующий код, чтобы проверить это:

CSS

<style>
    div {
        border: 1px solid green;
        width: 200px;
    }
</style>

JQuery

<script>
    $(document).ready(function(){
        $('div').click(function(){
            $(this).animate({'width':'+=10px'},{duration: 3000})
        });
    });
</script>

Похоже, что когда я нажимаю на внешний div, только этот div анимируется до большего div. Когда я нажимаю на внутренний div, оба div анимируются до больших div.

Я не знаю, ошибаюсь ли я, но этот тест показывает, что метод распространения браузера по умолчанию — это пузырь.

Пожалуйста, поправьте меня, если я ошибаюсь.


javascript html jquery event-bubbling propagation
person christostsang    schedule 05.07.2014    source источник
comment
@adeneo Как этот вопрос касается того, что делает jQuery? ОП, кажется, понимает, что такое всплытие и захват, он просто хочет знать, как это связано с jQuery.   -  person Barmar    schedule 05.07.2014
comment
@Barmar - не был уверен, поэтому я не закрылся, я подумал, что, возможно, OP нуждался в объяснении этого захвата, поскольку он вообще не имеет отношения к jQuery, поскольку jQuery жестко кодирует «false» для addEventlistener, когда это называется, и нет возможности изменить его, так как захват обычно никогда не используется.   -  person adeneo    schedule 05.07.2014

Ответы (4)


arrow_upward
58
arrow_downward

jQuery использует только всплытие событий. Если вы хотите добавить обработчик событий, использующий модель захвата, вы должны сделать это явно, используя addEventListener, с третьим аргументом true, как показано в вопросе.

person Barmar    schedule 05.07.2014

arrow_upward
5
arrow_downward

Всплывающие события, которые начнут выполняться от самого внутреннего элемента к самому внешнему элементу.

Захват событий, который начнет выполняться от внешнего элемента к самому внутреннему элементу.

Но jQuery будет использовать всплытие событий. Мы можем добиться захвата событий с помощью:

$("body")[0].addEventListener('click', callback, true);

Третий параметр в addEventListener, который сообщит браузеру, следует ли использовать всплытие событий или захват событий.

По умолчанию это ложь.

Если оно ложно, то потребуется всплытие событий. Если это правда, то потребуется захват событий.

person Vijay Ramesh    schedule 03.04.2018
comment
Вы также можете применить $(body).get(0), это то же самое, что и $(body)[0], что позволяет вам использовать jquery для работы с собственными функциями javascript. - person Muhammad Musavi; 15.04.2018

arrow_upward
2
arrow_downward

Вопросы и ответы живут со следующим заблуждением: что браузер либо захватывает, либо всплывает.

Правда в том, что браузер всегда выполняет и захват, и всплывающую подсказку при каждом нажатии и именно в таком порядке.

Есть ли что-то подобное для jQuery, чтобы обозначить, какой способ следовать, кроме пути JavaScript? Также jQuery использует фазу по умолчанию? Например пузырь?

jQuery не имеет фаз событий. В ДОМ есть. И DOM всегда делает и то, и другое. Но jQuery регистрирует обработчики только на фазе пузыря. В jQuery нет способа зарегистрироваться на фазе захвата, поэтому пузырьковая регистрация не используется по умолчанию, это единственный способ (с jQuery).

Я не знаю, ошибаюсь ли я, но этот тест показывает, что метод распространения браузера по умолчанию — это пузырь.

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

Если щелкнуть внутренний элемент div, захват переходит к внешнему элементу div, но для этой фазы там не зарегистрирован обработчик, затем он достигает цели, а на обратном пути (пузырьке) вызывает внешний обработчик элемента div. запустите свой код, но было бы трудно сказать, какой из них произошел первым (внутренний является первым).

(Примечание: как только цель достигнута, фаза фактически называется «целевой фазой», а обработчики вызываются независимо от того, на какую фазу они зарегистрированы (кстати, в порядке регистрации).)

person Robert Siemer    schedule 11.04.2020

arrow_upward
-2
arrow_downward

Событие запускается при всплытии события на элементе, на который щелкнул пользователь, и, если мы не вызываем .stopPropagation() для объекта события, событие затем запускается на всем пути вверх по DOM. По умолчанию в Jquery установлено всплывающее окно событий, чтобы использовать Capture, вам необходимо установить параметр как true в .addEventListner.

person Rashi Goyal    schedule 16.12.2019