why/how is 'this' keyword referring to event object and not global object as I have used 'this' keyword in a function

Question

What I did :

adding event listeners to all divs of type = "button"
when user clicks on any button I recorded the user clicks in an array using 'this' keyword

CODE:

var userClickedPattern = [];

var totalNoOfButtons = document.querySelectorAll("div[type=button]").length;

for (var i = 0; i < totalNoOfButtons; i++){
document.querySelectorAll("div[type=button]")[i].addEventListener("click", userClick);
}

function userClick(){

var userChosenColour = this.id;//why is 'this' referring to event object and not global object

userClickedPattern.push(userChosenColour);

console.log(userClickedPattern);

}

body {
  text-align: center;
  background-color: #011F3F;
}

#level-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 3rem;
  margin:  5%;
  color: #FEF2BF;
}

.container {
  display: block;
  width: 50%;
  margin: auto;

}

.btn {
  margin: 25px;
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  border-radius: 20%;
}

.game-over {
  background-color: red;
  opacity: 0.8;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pressed {
  box-shadow: 0 0 20px white;
  background-color: grey;
}

/* ANIMATION */
 /* KEYFRAMES */
   @keyframes btn-appearance {
     0% { opacity : 1; }
     100% { opacity: 0; }
   }

   /* animation class */
    .btn-sequence{
      animation-name : btn-appearance;
      animation-duration: 150ms;
      animation-timing-function: linear;
    }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Simon</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>

<body>
  <h1 id="level-title">Press A Key to Start</h1>
  <div class="container">
    <div class="row">

      <div type="button" id="green" class="btn green">

      </div>

      <div type="button" id="red" class="btn red">

      </div>
    </div>

    <div class="row">

      <div type="button" id="yellow" class="btn yellow">

      </div>
      <div type="button" id="blue" class="btn blue">

      </div>

    </div>

  </div>


/*jQuery*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
/*javascript*/
<script src = "game.js" type="text/javascript">

</script>
</body>

</html>

According to W3Schools theory on 'this' keyword: It has different values depending on where it is used:

In a method, this refers to the owner object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.

The Real Question: Explain me why 'this' keyword is referring to event object and not the global object as I have used 'this' keyword in a function userClick()

Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — evolutionxbox, Jul 21 '21 at 11:29
You are using the `this` keyword in a function that is being called in an event listener. So `this` refers to the event listener. If you were to call the function in the global scope `this` would refer to the global object. — lejlun, Jul 21 '21 at 11:32
@lejlun to the event currenttarget, not to the event listener. — Bergi, Jul 21 '21 at 12:44
@leljun so regarding functions , 'this' keyword will refer according to where the function is called? am i right? — Ratan Nampalle, Jul 21 '21 at 13:58

score 1 · Accepted Answer · answered Jul 21 '21 at 13:58

The value of this in a function is determined by how the function is called.

You aren't calling the function, you are passing it to addEventListener and then the browser is calling it (and assigning the element which is listening as the this value).

This is just how addEventListener is designed.

xplain me why 'this' keyword is referring to event object and not the global object as I have used 'this' keyword in a function userClick()

Assuming your quote "In a function, this refers to the global object" is accurate, W3Schools is just plain wrong (this is not unusual, they aren't good). The place a function declaration is declared has no bearing on the this value. They get it right when they contradict themselves with "In an event, this refers to the element that received the event".

why/how is 'this' keyword referring to event object and not global object as I have used 'this' keyword in a function

1 Answers1