Target js что это

theTarget = event.target

 
Кликните на EM, сработает обработчик на DIV 

 body * 
FORM 
DIV 
P
 
 

var form = document.querySelector('form'); form.onclick = function(event) < event.target.style.backgroundColor = 'yellow'; alert("target = " + event.target.tagName + ", this=" + this.tagName); event.target.style.backgroundColor = ''; >;

form < background-color: green; position: relative; width: 150px; height: 150px; text-align: center; cursor: pointer; >div < background-color: blue; position: absolute; top: 25px; left: 25px; width: 100px; height: 100px; >p < background-color: red; position: absolute; top: 25px; left: 25px; width: 50px; height: 50px; line-height: 50px; margin: 0; >body

     Клик выведет event.target и this: 
DIV 
P
 

Возможна и ситуация, когда event.target и this – один и тот же элемент, например если в форме нет других тегов и клик был на самом элементе .

Прекращение всплытия

Всплытие идёт прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента , а затем до document , а иногда даже до window , вызывая все обработчики на своём пути.

Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.

Для остановки всплытия нужно вызвать метод event.stopPropagation() .

Например, здесь при клике на кнопку обработчик body.onclick не сработает:

 Кликни меня 

event.stopImmediatePropagation()

Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.

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

Для того, чтобы полностью остановить обработку, современные браузеры поддерживают метод event.stopImmediatePropagation() . Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.

Не прекращайте всплытие без необходимости!

Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.

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

1. Мы делаем меню. Оно обрабатывает клики на своих элементах и делает для них stopPropagation . Вроде бы, всё работает.
2. Позже мы решили отслеживать все клики в окне, для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Например, Яндекс.Метрика так делает, если включить соответствующую опцию.
3. Над областью, где клики убиваются stopPropagation , статистика работать не будет! Получилась «мёртвая зона».

Проблема в том, что stopPropagation убивает всякую возможность отследить событие сверху, а это бывает нужно для реализации чего-нибудь «эдакого», что к меню отношения совсем не имеет.

Погружение

В современном стандарте, кроме «всплытия» событий, предусмотрено ещё и «погружение».

Оно гораздо менее востребовано, но иногда, очень редко, знание о нём может быть полезным.

Строго говоря, стандарт выделяет целых три стадии прохода события:

1. Событие сначала идёт сверху вниз. Эта стадия называется «стадия перехвата» (capturing stage).
2. Событие достигло целевого элемента. Это – «стадия цели» (target stage).
3. После этого событие начинает всплывать. Это – «стадия всплытия» (bubbling stage).

В стандарте DOM Events 3 это продемонстрировано так:

То есть, при клике на TD событие путешествует по цепочке родителей сначала вниз к элементу («погружается»), а потом наверх («всплывает»), по пути задействуя обработчики.

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

Обработчики, добавленные через on. -свойство, ничего не знают о стадии перехвата, а начинают работать со всплытия.

Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент addEventListener :

• Если аргумент true , то событие будет перехвачено по дороге вниз.
• Если аргумент false , то событие будет поймано при всплытии.

Стадия цели, обозначенная на рисунке цифрой (2) , особо не обрабатывается, так как обработчики, назначаемые обоими этими способами, срабатывают также на целевом элементе.

Есть события, которые не всплывают, но которые можно перехватить

Бывают события, которые можно поймать только на стадии перехвата, а на стадии всплытия – нельзя…

Например, таково событие фокусировки на элементе onfocus. Конечно, это большая редкость, такое исключение существует по историческим причинам.

Примеры

В примере ниже на , ,

стоят те же обработчики, что и раньше, но на этот раз – на стадии погружения. Чтобы увидеть перехват в действии, кликните в нём на элементе

:

target js что это

target — это свойство объекта события (event), которое указывает на элемент, на котором произошло событие. В JavaScript, это может быть любой элемент на веб-странице, например, кнопка, ссылка, форма и т.д.

Часто target используется в обработчиках событий (event listener), чтобы определить, на каком элементе произошло событие, и выполнить соответствующие действия. Например, можно использовать target для изменения содержимого элемента или добавления/удаления классов CSS.

Пример использования target для добавления класса CSS:

const button = document.querySelector('button'); button.addEventListener('click', function (event)  event.target.classList.add('active'); >); 

В этом примере мы добавляем класс active к элементу, на котором произошло событие click , используя свойство target объекта события.

Как работает метод target в js?

target является свойством объекта Event на котором произошло событие. Это свойство содержит ссылку на элемент/узел DOM-дерева:

const btn = document.querySelector('.button'); btn.addEventListener('click', (e) =>  console.log(e.target === btn); // true >); 

Часто можно встретить использование метода .closest() в подобных обработчиках. Это нужно для того, получить нужный элемент (кнопку), вместо других элементов. Если внутри кнопки будет другой вложенный элемент (например, ), то клик на нем отразится в содержимом свойства target , вместо ожидаемого btn .

Пример с .closest() :

btn.addEventListener('click', (e) =>  const targetButton = e.target.closest('button'); // (a) if (!targetButton) return; // завершить выполнение console.log(targetButton === btn); // true >); 

В строке ( a ) мы использовали .closest() чтобы получить целевой элемент ‘button’ , если он существует как e.target , либо как его родитель.