Порождается ли событие в элементе или оно само по себе?
Например, мы щелкаем кнопку на странице и возникает событие "click".
Согласно модели обработки событий, click пройдет фазу погружения (capture), target-фазу и фазу всплытия (bubble). И событие по мере прохождения этих фаз будет возникать на всех объектах, начиная с window, document, html, body и т.д., пока не дойдет до "таргета" (кнопки в нашем случае).
Тогда насколько вообще корректно говорить, что именно кнопка "породила" это событие? Ведь оно по сути возникает на целой куче элементов, причем изначально вообще даже не на кнопке. Предполагаю, что щелчок - это реально просто щелчок по экрану и браузер не знает, в какой элемент я щелкнул. Для него это просто щелк в X, Y а не в кнопку. Соответственно, вероятно он и не узнает, что я щелкнул в кнопку, пока событие до нее не спустится.
Может быть корректнее тогда говорить, что событие возникло, так сказать, не где-то (на кнопке в данном случае), а "просто" возникло. А потом прошло все элементы, добравшись до самого глубокого, которое оно затронуло.
Как минимум в событии есть target в котором прописана именно кнопка.
Так что на мой взгляд вполне правомерно. Это всё ещё ровно одно событие которое случилось именно из-за клика на кнопку. То что оно путешествует по всему дереву это особенность реализации
Lynn «Кофеман», но можно ли говорить, что это событие "возникает" на каждом элементе по пути к кнопке? Вот, грубо говоря, сидишь на собеседовании и говоришь, "Щелкаем на кнопку. Событие сначала возникает на объекте Window, потом на объекте Document, и дальше оно возникает на всех объектах по пути к кнопке. Потом оно возникает на самой кнопке и идет обратно вверх, вновь возникая на каждом объекте до самого Window"?
Я просто сам до терминологии дотошный, ментальную модель как это работает я уже составил, все понятно, но хочется еще и правильные слова подобрать.
Lynn «Кофеман», не согласен про словоблудие. Скорее это попытка внести ясность в формулировки.
Например, когда вы рассказываете про объект события, то как вы объясните, что такое target и currentTarget?
Aetae, это я понимаю, что объект, который попадает в обработчики - один и тот же.
Вопрос-то в другом. Есть форма, а в ней разные поля ввода, чекбоксы и т.д. Мы вешаем обработчик на форму, вводим что-то в поле или переключаем чекбокс. Мы можем конечно сказать, что "Произошло событие change на чекбоксе". И в target у нас будет чекбокс, а в currentTarget - форма (если говорить конкретно про тот обработчик, который мы на форму повесили). Но ведь по сути-то сначала это событие произошло вовсе не на чекбоксе, оно произошло на window и просто самый глубокий элемент, до которого оно смогло распространиться - это чекбокс.
Т.е. с технической точки зрения получается некорректно говорить, что "щелчок по чекбоксу спровоцировал событие".
Всем заправляет браузер: он получает событие клика (еще не JS-событие) от системы;
соображает, что в этом месте поверх всего нарисована кнопка – и кнопка становится таргетом. Далее браузерный движок создает и примеряет, согласно стандарту, JS-события по очереди к узлам DOM-дерева туда-обратно. Если по пути кто-то из слушателей не остановит дальнейшее путешествие распространение.
В браузер событие (мышиное, не JS) может прилететь от системы и мышки, может в безголовый браузер через его API — не важно.
По-моему можно говорить, что каждый DOM-элемент по пути получает JS событие от браузера. Согласно спекам понятна последовательность вручения этих событий и опция прекращения дальнейшего их вручения.
Сергей Соколов, ваше объяснение мне нравится. Теперь однозначно понятно, что событие возникает только один раз. Браузер рассчитывает "конечную точку" этого события (кнопка, поле ввода и т.д.), создает объект события, а затем начинает обход дерева элементов до конечной точки и у каждого элемента проверяет, нет ли у него обработчика этого события. Если есть - он его вызывает.
