Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Using the `this` Keyword  ›  Lesson

this Used Alone, and in Event Handlers

using it alone 12 minA function called with nothing before the dot gets this = the global object in sloppy mode or undefined in strict mode; a regular function used as a DOM event listener instead gets this = the element the listener was attached to.

this Used Alone, and in Event Handlers

In short: call a plain function with nothing in front of the dot, and JavaScript supplies a default this: the global object in sloppy mode, or undefined in strict mode. DOM event listeners look like the same situation — a function called with no object written before it — but the browser deliberately overrides that default: inside a regular function used as a listener, this is set to the element the listener was attached to. Same shape of call, two different rules, because one is JavaScript's ordinary default and the other is a DOM API making its own choice.

Two boxes: "called with nothing in front" — function show(){console.log(this);} show(); — sloppy: the global object, "use strict": this = undefined; and "inside a DOM event handler" — button.addEventListener("click", function(){ this // the button itself }) — a REGULAR function listener: this is set to whatever was clicked

Call a function with nothing in front of it

With no object before the dot, sloppy mode falls back to the global object; strict mode refuses to guess and uses undefined instead:

javascript

This prints "object" — in sloppy mode (the default, no "use strict" here), this defaults to the global object, which has typeof "object". Add "use strict"; inside show, and the same call gives this = undefined instead — no silent fallback, just a clear "nothing was supplied".

Read which element a click handler belongs to

DOM event listeners are a deliberate exception: even though a regular function listener is "called" by the browser with no explicit object before it, the DOM API sets this to the element itself — read this code, it needs a real page to run:

const button = document.querySelector("#play");

button.addEventListener("click", function () {
  console.log(this); // the <button> element — set by addEventListener, not by JavaScript's own default
  this.disabled = true; // this really is the button — can set its properties directly
});

this here is the exact <button> the listener is attached to, letting the handler act on it directly — this.disabled = true disables the button that was just clicked, with no need to look it up separately.

The trap: expecting the same default everywhere

Seeing this used with no explicit object in front of a call doesn't tell you which rule applies — plain JavaScript's default (global object or undefined) and a DOM API's own special-cased this (the listening element) look identical at the call site. What decides it is who is doing the calling: your own code calling a plain function follows JavaScript's rule; addEventListener calling your listener follows the DOM's rule.

Quick practice

quick drill

What does function show() { console.log(typeof this); } show(); print, with no strict mode?

quick drill

What is this inside function show() { "use strict"; console.log(this); } show();?

quick drill

Inside a regular function used as button.addEventListener("click", function () { ... }), what is this?

quick drill

Why does a DOM event listener's this differ from a plain standalone function call's this?

quick drill

What can this.disabled = true; do inside a click listener on a button?

🎯 Your turn

A button has button.addEventListener("click", function () { console.log(this); }); attached with a regular function. Explain what this is inside that function when the button is clicked, and how it's different from calling a plain standalone function with no object in front of it.

Write your explanation and submit it — there's no code to run here, just your reasoning.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

Explainthis inside a click handler

A button has button.addEventListener("click", function () { console.log(this); }); attached with a regular function. Explain what this is inside that function when the button is clicked, and how it's different from calling a plain standalone function with no object in front of it.