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

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

Свойство delegateTarget объекта Event возвращает элемент, к которому был прикреплен вызванный в данный момент обработчик события. Это свойство будет отличаться от свойства event.currentTarget только в том случае, если обработчик события делегирован, а не на прямую привязан к элементу (например, использован jQuery метод .on(), где обработчик событий присоединен к предку элемента).

jQuery синтаксис:

Синтаксис 1.3:
event.delegateTarget

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Отличие свойств currentTarget и delegateTarget объекта Event</title>
		<script>
	$( document ).ready(function(){
	  // устанавливаем делегированный обработчик события "click" и передаем объект события в качестве параметра функции
	  $( "button" ).on( "click", "button", function( event ) {
	    console.log( "button currentTarget", event.currentTarget); // выводим в консоль значение свойства currentTarget
	    console.log( "button delegateTarget", event.delegateTarget); // выводим в консоль значение свойства delegateTarget
	  })
	  // устанавливаем прямой обработчик события "click" и передаем объект события в качестве параметра функции
	  $( "span" ).click(function( event ) {
	    console.log( "span currentTarget", event.currentTarget); // выводим в консоль значение свойства currentTarget
	    console.log( "span delegateTarget", event.delegateTarget); // выводим в консоль значение свойства delegateTarget
	  })
	});
		</script>
	</head>
	<body>
			<span>Элемент спан</span>	
			<p>Параграф</p>	
			<button>Кнопка</button>
	</body>
</html>

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

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

Кроме того, мы установили прямой обработчик события на элементе <span>, который при клике левой кнопкой мыши на элементе <button>, вложенном в <div> вызывает функцию, которая выводит в консоль значения свойств currentTarget и delegateTarget объекта Event. Значения свойств currentTarget и delegateTarget для прямых обработчиков событий будут совпадать. Как вы можете заметить свойство delegateTarget будет отличаться от свойства currentTarget только в том случае, если обработчик события делегирован, а не на прямую привязан к элементу.

Более подробную информацию о делегированных и прямых событиях вы можете получить в описании метода .on().

Результат нашего примера:

Отличие свойств currentTarget и delegateTarget объекта Event

jQuery события