progway — программирование, IT

Event: особенности target и currentTarget

Напоминаю, что при обработке события, функция-обработчик получает первым аргументом объект события Event, который содержит различные поля, это самое событие идентифицирующие. Одними из таких полей являются свойства target и currentTarget, рассмотрим их поближе:

event.target — это тот элемент вёрстки, который вызвал событие.
event.currentTarget — это тот элемент вёрстки, к которому прикреплен обработчик события.

Скорее всего, из сухих определений мало что можно понять, поэтому рассмотрим пример:

<button id="outer">
    Outer Button
    
    // всегда будем кликать именно на 
    // внутреннюю кнопку
    <button id="inner">Inner Button</button>
</button>

const outerButton = document.getElementById('outer');
const innerButton = document.getElementById('inner');

outerButton.addEventListener('click', function(event) {
  // выведет 'inner', потому что этот элемент вызвал событие
    console.log('event.target:', event.target.id);'
    // выведет 'outer', так как обработчик принадлежит именно
    // внешней кнопке
    console.log('event.currentTarget:', event.currentTarget.id); // выведет 'outer'
});

innerButton.addEventListener('click', function(event) {
  // ожидаемо увидим 'inner'
    console.log('event.target:', event.target.id);
    // также ожидаемо будет 'inner', так как этот обработчик
    // принадлежит уже innerButton
    console.log('event.currentTarget:', event.currentTarget.id);
});

Тут мы видим, что event.target всегда ссылается на кнопку inner, поскольку именно она и триггерит событие, когда пользователь на нее кликает. В свою очередь, event.currentTarget ссылается именно на тот элемент, чей обработчик сработал.

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

Различие между event.target и event.currentTarget особенно полезно при работе с вложенными элементами, когда обработчики событий привязаны к родительским элементам, то есть при делегировании событий, о чём я также писал ранее. Ну и на собесе поможет, конечно же)

Спасибо за прочтение, это важно для меня ❤️

#theory #web #javascript

❤30👍16🔥2🐳2

www.tgoop.com/prog_way_blog/215

1.79K viewsedited  Apr 6, 2024 at 14:05

Event: особенности target и currentTarget

Напоминаю, что при обработке события, функция-обработчик получает первым аргументом объект события Event, который содержит различные поля, это самое событие идентифицирующие. Одними из таких полей являются свойства target и currentTarget, рассмотрим их поближе:

event.target — это тот элемент вёрстки, который вызвал событие.
event.currentTarget — это тот элемент вёрстки, к которому прикреплен обработчик события.

Скорее всего, из сухих определений мало что можно понять, поэтому рассмотрим пример:

<button id="outer">
    Outer Button
    
    // всегда будем кликать именно на 
    // внутреннюю кнопку
    <button id="inner">Inner Button</button>
</button>

const outerButton = document.getElementById('outer');
const innerButton = document.getElementById('inner');

outerButton.addEventListener('click', function(event) {
  // выведет 'inner', потому что этот элемент вызвал событие
    console.log('event.target:', event.target.id);'
    // выведет 'outer', так как обработчик принадлежит именно
    // внешней кнопке
    console.log('event.currentTarget:', event.currentTarget.id); // выведет 'outer'
});

innerButton.addEventListener('click', function(event) {
  // ожидаемо увидим 'inner'
    console.log('event.target:', event.target.id);
    // также ожидаемо будет 'inner', так как этот обработчик
    // принадлежит уже innerButton
    console.log('event.currentTarget:', event.currentTarget.id);
});

BY progway — программирование, IT