СОБЫТИЕ CLICK РАСПРОСТРАНЯЕТСЯ ДАЖЕ БЕЗ ОБРАБОТЧИКА
<body>
<form id = "form">FORM
<div id = "div" style = "background-color: aqua;">DIV
<p id = "p" style = "background-color: blue;">P</p>
</div>
</form>
<script src = "index.js"></script>
</body>
Хотя у меня нет обработчика кликов ни на p, ни на div (это специально), когда я нажимаю, например, на div, он вызывает щелчок на более внешнем элементе (form).
JS:
let form = document.getElementById('form');
let div = document.getElementById('div');
let p = document.getElementById('p');
form.addEventListener("click", e => { // why is this event triggered when I click on p or div?
console.info("capturing form")
}, true);
div.addEventListener("focus", e => { // it's intentional
console.info("capturing div")
}, true);
p.addEventListener("focus", e => { // it's intentional
console.info("capturing p")
}, true);
Выход:
capturing form
Это ожидаемое поведение?
![Интервьюер: Почему '[] instanceof Object' возвращает "true"?](https://cdn-images-1.medium.com/max/120/0*3Q2LAQJh9HQrdTPK)
Ответы 1
Обработчик кликов для события — это функция, определяющая дальнейшую обработку при возникновении события. С функцией обработчика или без нее, браузер все равно запустит событие.
Как вы могли видеть в приведенном ниже фрагменте, событие щелчка будет распространяться от дочернего элемента к родительским элементам. Всплывающие события являются ожидаемым поведением для события click.
let form = document.getElementById('form');
form.addEventListener("click", e => {
console.info("** click event on element: " + e.target.id);
console.info(". bubbling to element: " + e. currentTarget.id);
}, true);
form.addEventListener("keyup", e => {
console.info("** keyup event on element: " + e.target.id);
console.info(" bubbling to element: " + e. currentTarget.id);
}, true);
form.addEventListener("focusin", e => {
console.info("** focusin event on element: " + e.target.id);
console.info(" bubbling to element: " + e. currentTarget.id);
}, true);<form id = "form" >FORM
<div id = "div" style = "background-color: aqua;">DIV
<p id = "p" style = "background-color: blue;">P</p>
<input id = "text" type = "text" />
</div>
</form>Да, я отредактировал свой ответ в соответствии с вашим обновленным вопросом. Всплывание события является нормальным поведением для события, на которое нажали. Если хотите, вы можете остановить всплывающее событие в функции обработчика кликов stackoverflow.com/questions/387736/…
@ Coder23 Кроме того, если вы хотите, чтобы событие focus запускалось, вы должны установить tabindex для соответствующих элементов.
Но почему щелчок по p (у которого нет обработчика кликов, но есть фокус) вызывает событие click в форме? По-моему, это не имеет никакого отношения @Trung Duong
Он должен распространяться только в том случае, если у p есть обработчик кликов, верно?
Когда вы нажимаете на 1 элемент, независимо от того, имеет ли этот элемент обработчик щелчка, это событие щелчка будет всплывать к его родителю. Подробнее об этом можно узнать по этой ссылке developer.mozilla.org/en-US/docs/Learn/JavaScript/…
Обработчик кликов для события — это функция, определяющая дальнейшую обработку при возникновении события. С функцией обработчика или без нее, браузер все равно запустит событие.
Независимо от того, имеет ли этот элемент обработчик кликов, это событие клика будет всплывать к его родителю - где упоминается @Trung Duong?
@GeorgeMeijer Вы можете попробовать мой обновленный фрагмент, чтобы увидеть идентификатор целевого элемента, который запускает событие щелчка и всплывает (без прикрепления к нему какого-либо обработчика), или перейдите по этой ссылке, чтобы увидеть, как все события запускаются для элемента stackoverflow.com/questions /10213703/…
Привет @Trung Duong, эта вещь о событиях, распространяющихся на предков без обработчика, относится ли она только к щелчку?
@GeorgeMeijer Это также происходит (всплывание событий) для других событий, таких как keyup, keydown, focusin ... Я добавил несколько примеров событий в свой ответ, пожалуйста, проверьте.
Теперь я понимаю @Trung Duong +1. Сначала запускаются события фазы захвата, а затем события фазы всплытия, верно? «Пострадавшие» элементы — это все те, кто участвует как потомки (захват)/восходящие (пузырьки) цели, верно?
@Coder23 Coder23 Да, когда элемент получает событие, это событие всплывает (или, можно сказать, передается или распространяется) к его родительскому и предковому элементам в дереве DOM, пока не доберется до корневого элемента. Обратите внимание, что некоторые конкретные события не будут всплывать на его родителей, например focus, blur...
Отлично @Trung Duong спасибо +1
Привет @Trung Duong, я сделал это намеренно, потому что это часть вопроса, фокус не связан с щелчком, но щелчок активируется в форме.