Захват событий против событий
Я просто хотел получить общее согласие относительно лучшего способа делегирования событий в JS между всплытием и захватом.
Теперь я понимаю, что в зависимости от конкретного варианта использования можно использовать фазу захвата поверх пузырьков или наоборот, но я хочу понять, какой режим делегирования предпочтителен для большинства общих случаев и почему (на мой взгляд, это режим пузырьков).
Или, другими словами, есть ли причина реализации add3ventListener W3C в пользу режима пузыривания. [захват начинается только тогда, когда вы указываете 3-й параметр и его true. Тем не менее, вы можете забыть, что 3-й параметр и пузырьковый режим включены]
Я посмотрел функцию связывания JQuery, чтобы получить ответ на мой вопрос, и кажется, что он даже не поддерживает события в фазе захвата (мне кажется, потому что IE не поддерживает режим захвата).
Похоже, режим пузырьков является выбором по умолчанию, но почему?
5 ответов
В прошлом это была проблема с платформой, у Internet Explorer была пузырьковая модель, а Netscape больше занимался захватом (но поддерживал оба).
Модель W3C требует от вас выбора, какой вы хотите.
Я думаю, что пузырьки более популярны, потому что, как уже говорилось, есть некоторые платформы, которые поддерживают только пузырьки...и это имеет смысл в качестве режима по умолчанию.
Какой из них вы выбираете, в значительной степени является результатом того, что вы делаете, и что имеет для вас смысл.
Читая JavaScript: "Полное руководство", 5-е издание, я натолкнулся на пример 17-4 на странице 422, который определяет функцию для перетаскивания абсолютно позиционированных элементов. В примере функция drag() называется в onmousedown атрибут элемента документа. Функция перемещает элемент на основе изменения местоположения мыши, которое запрашивается обработчиками, добавленными к корневому элементу документа для захваченных событий mousemove и mouseup. Они фиксируют эти события в документе по следующей причине:
Важно отметить, что обработчики mousemove и mouseup зарегистрированы как обработчики событий захвата, потому что пользователь может перемещать мышь быстрее, чем элемент документа может следовать за ней, и некоторые из этих событий происходят вне исходного целевого элемента.
Это дает преимущество в более быстром реагировании при захвате событий.
Этот тест предполагает небольшое преимущество в производительности при использовании захвата над пузырем. Даже не убивая событие, как только оно будет обработано, однако, когда оно было оставлено, оно было маргинальным. Я полагаю, сложный DOM преувеличил бы разницу в производительности между ними.
Эта ссылка дает четкое объяснение - https://www.quirksmode.org/js/events_order.html
Вы, веб-разработчик, можете выбрать, регистрировать ли обработчик событий в процессе захвата или в фазе всплытия. Это делается через addEventListener() Метод объяснен на странице Расширенные модели. Если его последний аргумент равен true, обработчик событий устанавливается для фазы захвата, если он равен false, обработчик событий устанавливается для фазы пузырьков.
Предположим, вы делаете
element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)
Если пользователь нажимает на element2, происходит следующее:
Событие щелчка начинается на этапе захвата. Событие проверяет, есть ли у какого-либо предка элемента element2 обработчик события onclick для фазы захвата. Событие находит один на element1. doSomething2() выполняется. Событие перемещается вниз к самой цели, больше не найдено обработчиков событий для фазы захвата. Событие переходит в свою фазу пузырьков и выполняет doSomething(), который зарегистрирован в element2 для фазы пузырьков. Событие снова перемещается вверх и проверяет, есть ли у какого-либо предкового элемента цели обработчик события для фазы пузырьков. Это не так, поэтому ничего не происходит. Обратное будет
element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)
Теперь, если пользователь нажимает на element2, происходит следующее:
Событие щелчка начинается на этапе захвата. Событие проверяет, имеет ли какой-либо элемент-предок element2 обработчик события onclick для фазы захвата, и не находит его. Событие проходит вниз к самой цели. Событие переходит в свою фазу пузырьков и выполняет doSomething(), который зарегистрирован в element2 для фазы пузырьков. Событие снова перемещается вверх и проверяет, есть ли у какого-либо предкового элемента цели обработчик события для фазы пузырьков. Событие находит один на element1. Теперь doSomething2 () выполняется. Совместимость с традиционной моделью В браузерах, которые поддерживают W3C DOM, традиционная регистрация событий
element1.onclick = doSomething2;
рассматривается как регистрация в фазе барботирования.
Использование всплывающих событий Немногие веб-разработчики сознательно используют захват событий или всплывающие сообщения. В веб-страницах, как они сделаны сегодня, просто нет необходимости допускать, чтобы пузырьковое событие обрабатывалось несколькими различными обработчиками событий. Пользователи могут запутаться в нескольких вещах, происходящих после одного щелчка мыши, и обычно вы хотите, чтобы ваши сценарии обработки событий были разделены. Когда пользователь нажимает на элемент, что-то происходит, когда он нажимает на другой элемент, что-то еще происходит.
Конечно, это может измениться в будущем, и хорошо, что есть модели, совместимые с прямой совместимостью. Но основное практическое использование захвата и всплытия событий сегодня - это регистрация функций по умолчанию.
Я не уверен, но я почти уверен, что все, что вы можете сделать с пузырьками, вы можете сделать с захватом и наоборот.
Идея о том, что некоторые события будут пузыриться, а некоторые захватывать в одном и том же приложении, звучит как хороший способ запутать вещи. Я не думаю, что пузыри против захвата действительно имеют значение. Важно то, что вы выбираете один и придерживаетесь его.
API-интерфейсы W3C часто содержат подобные вещи, в которых есть множество функций, которые никому не нужны. Возможно, это еще один пример того, как хорошие значения по умолчанию могут устранить необходимость настройки или даже целых функций.