JQuery — Javascript — стрелка функции этого в обработчике событий?

Javascript — функции стрелок это в обработчике событий?

Используя функцию стрелки в качестве обратного вызова, вместо использования this для получения элемента, с которым связан обработчик, вы должны использовать event.currentTarget .
Значение this внутри функции стрелки определяется тем, где определена функция стрелки, а не тем, где она используется .
Так что теперь имейте в виду, что event.currentTarget всегда ссылается на элемент DOM чьи EventListeners в настоящее время обрабатываются.


Используйте event.currentTarget вместо event.target из-за event.currentTarget / захвата событий :

  • event.currentTarget — это элемент, к которому подключен прослушиватель событий.
  • event.target — это элемент, вызвавший событие.

Из документации:

currentTarget типа EventTarget , readonly Используется для указания EventTarget чьи EventListeners в настоящее время обрабатываются. Это особенно полезно во время захвата и барботирования .

Проверьте основной пример в приведенном ниже фрагменте

 var parent = document.getElementById('parent'); parent.addEventListener('click', function(e) { document.getElementById('msg').innerHTML = "this: "   this.id   "<br> currentTarget: "   e.currentTarget.id   "<br>target: "   e.target.id; }); $('#parent').on('click', function(e) { $('#jQmsg').html("*jQuery<br>this: "   $(this).prop('id')   "<br>currenTarget: "   $(e.currentTarget).prop('id')   "<br>target: "   $(e.target).prop('id')); }); $('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: '   e.currentTarget.id)); 
 #parent {background-color:red; width:250px; height:220px;} #child {background-color:yellow;height:120px;width:120px;margin:0 auto;} #grand-child {background-color:blue;height:50px;width:50px;margin:0 auto;} #msg, #jQmsg, #arrmsg {font-size:16px;font-weight:600;background-color:#eee;font-family:sans-serif;color:navy;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent">Parent-(attached event handler)<br><br> <div id="child"> Child<br><br> <p id="grand-child">Grand Child</p> </div> </div> <div id="msg"></div><br> <div id="jQmsg"></div><br> <div id="arrmsg"></div> 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector