в JavaScript, если триггер события объявлен в элементе HTML и его предке, который срабатывает первым?

Question

есть два триггера onchange: один на INPUT и один из FORM, содержащей INPUT.

document.getElementByTagName('form')[0].addEventListener('change',funcForm);
document.getElementByTagName('input')[0].addEventListener('change',funcInput);

1. funcForm или funcInput срабатывает первым?

2. определено ли это поведение и соответствует ли оно?

3. , если на первом триггере запускается e.stopPropagation(), срабатывает ли второй выстрел?

Answer 1

Зависит от того, установлен ли обработчик событий для фазы захвата или фазы всплывающей . Функция addEventListener имеет третий параметр, называемый useCapture, который по умолчанию равен false. Если значение useCapture равно true, элемент-предок захватывает событие на пути вниз по дереву DOM и сначала запускает его обработчик. Если useCapture равно false (по умолчанию), событие перемещается вниз по дереву DOM к цели события, и дочерний элемент сначала запускает свой обработчик, а затем событие пузыряется вплоть до предка.

То есть, как у вас сейчас: funcInput будет стрелять первым; поведение определено и соответствует; и e.stopPropagation() предотвратит запуск funcForm и любых других обработчиков событий.

Проверьте http://www.quirksmode.org/js/events_order.html и https://developer.mozilla.org/en/DOM/element.addEventListener для получения дополнительной информации.

Answer 2

Сначала должны быть запущены обработчики ввода, а затем событие должно всплыть в иерархии DOM, если оно всплывет.Из спецификации DOM Events :

Событие отправляется его целевой EventTarget, и все найденные там прослушиватели событий срабатывают.Затем всплывающие события будут запускать любые дополнительные прослушиватели событий, найденные путем следования родительской цепочки EventTarget вверх
[...]
. Любой обработчик событий может решить предотвратить дальнейшее распространение события, вызвав метод stopPropagation Event.интерфейс.Если какой-либо EventListener вызывает этот метод, все дополнительные EventListeners на текущем EventTarget будут запущены, но пузыри на этом уровне прекратятся.Для предотвращения дальнейшего всплытия требуется только один вызов stopPropagation.

Второй абзац относится к stopPropagation и говорит, что если слушатель на input вызывает e.stopPropagation(), то событиене должен вставать до <form>.Однако все оставшиеся слушатели на <input> увидят событие изменения, stopPropagation просто не даст событию всплыть вверх по дереву дальше уровня, на котором вызывается stopPropagation.

Кроме того, событие изменения выдает :

изменение
Событие изменения происходит, когда элемент управления теряет фокус ввода и его значениебыл изменен с момента получения фокуса.Это событие действительно для INPUT, SELECT и TEXTAREA.элемент.

• Пузыри: Да