Using this inside an event handler

Question

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?

In case of bubbling I see "this" changes and means the event.currentTarget.

possible duplicate of [JavaScript "this" keyword](http://stackoverflow.com/questions/3127429/javascript-this-keyword) — Starx, Jul 15 '13 at 23:19
man.. can you please answer it inside of marking it duplicate? — P K, Jul 15 '13 at 23:21
I found good explanation here that also talks about event handler. http://www.digital-web.com/articles/scope_in_javascript/ — P K, Jul 15 '13 at 23:34
@Bergi, He is asking about what this keyword represents and he will read plenty of answers there. — Starx, Jul 15 '13 at 23:38
@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. — Bergi, Jul 15 '13 at 23:41

Bergi · Accepted Answer · 2013-07-16T11:00:14.070

21

Indeed, the Definitive Guide is wrong in that case.

I found a reference in the HTML5 event handler processing algorithm:

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.

edited Jul 16 '13 at 11:00

answered Jul 15 '13 at 23:31

Bergi

630,263
148
957
1,375

Noting that the HTML 5 *specification* is not a *standard*, the DOM specifications are. :-). The DOM specifications are language neutral (as were the HTML specifications up to 4.01) and therefore do not include language features like the *this* keyword. – RobG Jul 16 '13 at 00:38
@RobG Your point is absolutely valid. I was confused with the book description, so asked this question here. – P K Jul 16 '13 at 00:48
@PK—also should have mentioned that in many places, HTML5 just documents behaviour (and picks favourites in the process), so while Bergi's quote of the HTML5 spec. might be correct for most cases in most browsers, it isn't for some (e.g. listeners added using IE's *attachEvent*). – RobG Jul 16 '13 at 03:40
@RobG: Thanks for your comment. I now also found references in the DOM level 3 and 4 specs :-) – Bergi Jul 16 '13 at 11:01
@Bergi—kudos for persevering. I don't like the DOM standards becoming more ECMAScript–centric, language agnosticism was one of their good points. The statement that listeners are called "in the context" of an element infers that the element and it's properties are on the listener's (function's) scope chain (*cf* execution context). Passing the event target as *this* should be a language feature, there's already an event object passed to the function that has a reference to the event target, so there's no need for setting *this* (though it's handy). What about languages that don't have *this*? – RobG Jul 17 '13 at 00:27
Yeah, me neither - but that's the way they're going. At least they've put the specific parts in the ES language binding of Web IDL. I guess other languages can just ignore `this`, since all relevant information is already on the `Event` object. – Bergi Jul 17 '13 at 01:58

employee-0 · Answer 2 · 2013-07-15T23:50:00.543

In an event handler for an element, with default capturing (false), this will refer to the element which detected the event. Either one may be used.

For example:

element.addEventListener('keydown', function (event) {
    // `this` will point to `element`
}, false);

When capturing an event (true), say at the window level, event.target, will refer to the element which originated the event, while this will refer to the capturing element. For example:

window.addEventListener("error", function (event) {
    event.target.src = 'some_path';
    // `this` will point to window
    // `event.target` will point to the element that had an error
}, true);

I hope this exemplifies the difference between each.

In my tests, the this keyword doesn't refer to the element inside an event handler unless the handler is define via the corresponding onevent attribute. — Rafid Muhymin Wafi, Jun 19 '22 at 17:16

Using this inside an event handler

2 Answers2

Linked

Related