Свойство target объекта Event

Определение и применение

Свойство target объекта Event соответствует DOM элементу, который инициировал событие. Свойство target может быть как элементом, на котором установлен обработчик события, так и его потомком. Это свойство может быть полезным при делегированых событиях, когда событие находится в фазе всплытия для определения элемента, который инициировал событие.

jQuery синтаксис:

Синтаксис 1.0:

event.target

Пример использования

Давайте рассмотрим пример, в котором увидим в чем заключается разница в свойствах currentTarget и target объекта Event:

Свойство target — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<div>
  <span>Элемент спан</span>
  <p>Параграф</p>
  <button>Кнопка</button>
</div>

main.js

JavaScript

$(document).ready(function () {
    // устанавливаем прямой обработчик события "click" и передаем объект события в качестве параметра функции
    $('div').click(function (event) {
        console.log('div currentTarget', event.currentTarget) // выводим в консоль значение свойства currentTarget
        console.log('div target', event.target) // выводим в консоль значение свойства target
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы разместили внутри блока <div> три элемента (элемент <span>, элемент <p> и элемент <button>).

На элемент <div> с использованием jQuery метода .click() мы создали прямой обработчик события, который при клике левой кнопкой мыши на элементе <div> вызывает функцию, которая выводит в консоль значения свойств currentTarget и target объекта Event.

Обратите внимание, что значения свойств будут отличаться, currentTarget всегда будет содержать элемент <div>, так как именно он вызвал событие (обработчик события сработал именно на этом элементе), а target будет содержать ссылку на конкретный элемент внутри элемента <div> (элемент, который инициировал событие).