Using this inside an event handler
I was trying to find the meaning of this keyword inside event handler function in the DOM level 3 event spec. As per my experiment this refers to the event.currentTarget object. Is this behavior mentioned somewhere in the standard? As per «JavaScript The Definitive Guide» book this refers to the event target which seems to wrong. event.currentTarget seems more logical as event handlers are invoked as the method of the HTML element object. Can someone please clarify?
I found good explanation here that also talks about event handler. digital-web.com/articles/scope_in_javascript
@Starx: To me, he’s looking for a specification for the behaviour he observed. He knows how the this keyword works, and the question you linked has nothing to do with events.
2 Answers 2
Indeed, the Definitive Guide is wrong in that case.
Invoke callback with one argument, the value of which is the Event object E , with the callback this value set to E ‘s currentTarget .
The DOM level 3 event specification didn’t say much about it in previous versions — it was meant to be language agnostic. The Appendix F: ECMAScript Language Binding just stated
EventListener function: This function has no return value. The parameter shall be an object that implements the Event interface.
However, current versions omitted these bindings. And in its Glossary appendix event listeners are described:
event handler, event listener: An object that implements the EventListener interface and provides an EventListener.handleEvent() callback method. Event handlers are language-specific. Event handlers are invoked in the context of a particular object (the current event target) and are provided with the event object itself.
Also, the upcoming DOM Level 4 draft, whose goals contain aligning the DOM with the needs of EcmaScript, does explicitly state in the Dispatching Events section:
If listener ‘s callback is a Function object, its callback this value is the event ‘s currentTarget attribute value.
Отличия this от event в JavaScript
В JavaScript this всегда относится к «владельцу» выполняемой функции, или, если быть точнее, к объекту, методом которого является функция. Также, в JavaScript мы можем использовать this для указания на определенный объект.
Неаккуратное использование this в JavaScript может стать источником трудно отлавливаемых ошибок.
Что же такое this? Переменная this в функции всегда ссылается на объект, который вызывает эту функцию как метод. Если же функция вызывается просто как функция, а не как метод какого-либо объекта — значение this ссылается на глобальный объект (в строгом режиме в этом случае значением this будет undefined).
Таким образом, переменная this, используемая внутри функции (скажем, функции A), содержит ссылку на объект, который вызывает функцию А. Т.е. переменная this позволяет получить доступ к свойствам и методам объекта, вызывающего функцию A. Это особенно актуально в том случае, если мы не всегда знаем, какой объект вызывает функцию. Таким образом, this — это своего рода ярлык внутри функции, ссылка на вызывающий функцию объект.
На каком бы элементе мы ни поймали событие, всегда можно узнать, где конкретно оно произошло.
Самый глубокий элемент, который вызывает событие, называется «целевым» или «исходным» элементом и доступен как event.target. Возможна и ситуация, когда event.target и this – один и тот же элемент, например если в форме нет других тегов и клик был на самом элементе.
Например, если стоит только один обработчик form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента , на котором сработает обработчик.
Отличия this от event
this — это переменная в функции, ссылка на объект, который вызывает эту функцию или текущий элемент, до которого дошло всплытие и на нём сейчас выполняется обработчик.
event — это объект события, а event.target — источник события.
this или event.currentTarget — всегда будет объект, к которому привязан обработчик событий, например, даже если кликнули по элементу внутри формы, например по кнопке, то все равно это будет форма, так как обработчик сработал на ней. Внутри обработчика, currentTarget всегда совпадает с переменной this. Однако, этот элемент может не являться источником события, поскольку оно могло быть передано от дочернего элемента, в результате «всплытия» события, вверх по иерархии DOM. Первоначальный источник события содержится в event.target.
event.target – это исходный элемент, на котором произошло событие, в процессе всплытия он неизменен. event.target будет содержать ссылку на конкретный элемент внутри формы, на котором произошёл клик. Это не тот элемент, к которому был привязан обработчик этого события, а именно самый глубокий тег, на который непосредственно был, к примеру, совершен клик.
Если повесить событие не на одиночный элемент типа input, а не на какой-нибудь блок с вложенными элементами, то event.target, мог бы вернуть и вложенный элемент, который являлся источником события.
Пример с this
В данном примере, this это объект user.
Функция getFullName из примера выше дважды выведет один и тот же результат.
Understanding event.target and Use Cases
The Event interface represents an event that takes place in the Document Object Model [DOM].
Events refer to happenings in the DOM from the loading of a page to the navigation to another page or the closing of a page. These events can occur automatically or can be triggered by user actions.
Examples of events include click (pressing mouse button), change (e.g an input field changing), load (when an object has been loaded, often used with the body element) and so many more.
Events also possess properties that provide more information about that event. Find a list of those properties in the MDN docs.
Among these properties, I’d be explaining the target property, which can be accessed like this, event.target
target , is a property of an event which is a reference to the element upon which the event was fired. Just as ‘target’ means ‘aiming at something’, it’s used to ‘aim’ at that particular element.
This property gives us access to the properties of that element.
NOTE that this property is different from currentTarget . currentTarget returns a reference to the actual object that fired the event while target returns a reference to the object of which the event was fired upon regardless of the element that listened to the event.
Check out the pen below to understand the difference better.
See the Pen currentTargetVStarget by Dillion Megida
Since the target property has given us access to the element, we could then read some of the properties (which are the attributes) and also display them somewhere else.
The most common use case is in input elements. For example, a change event is listened to on an input field. This event is fired once there is a change in the content of that input (which could be a change in value). The value of the input could then be transformed or displayed somewhere else.
Check out this pen — A simple program that displays the value as it changes.
See the Pen event.target.value by Dillion Megida
Let’s analyze the code used.
- The reason I added the event listener to the input instead of the container is that I do not want to listen to every change event on the container. Other change events could occur in it such as select tags or textarea . Hence, I listened to only change events in the input tag.
- I set variable references to the input tag and the initially empty h1 tag.
- I listened for every change event on the input and applied a function that sets the value of the input to the content of the h1 tag.
- I used the target property to target the input.
You could also use the property to set attributes of an element. For example, the class attribute. Let’s say you have a class attribute of ‘red’ which changes the text color of elements to red, you could have this;
style> .red color: red; > style> p id="toBeChanged">My color can changep> script> function changeColorToRed(event) event.target.className = "red" > let toBeChanged = document.querySelector("toBeChanged") toBeChanged.addEventListener("click", changeColorToRed, false) script>If you tried this code, you’d notice that when you click on the paragraph, its color changes to red.
There are other use cases that could be made out of this property. From the above examples which showed how to get properties and set properties of elements which events were fired on, I believe you’d be able to create more interactive applications.
The target property of events allows us to access the element of which the event was fired and its respective attributes. We can further get the properties or even set them.
Articles written with ❤ by
Dillion Megida