Event Listeners

Understanding user interaction events

When a user visits your page, every interaction they have with the page (e.g., a mouse click, scrolling, window resizing, etc.) is recorded as a series of events. As programmers, we can use these events to bind JavaScript code to specific user interactions.

Hopefully, this code is making much more sense to you now that you’ve learned a bit about how JavaScript works.

• The variable button stores an element node object that represents the HTML button.

• Since button is an object, we can define properties on it.

• the onclick property acts as an event listener: onclick is defined as a function, and that function will execute whenever a click event occurs on the <button> element.

Exercise

Modify the onclick event listener to add a <p> element that says Clicked! every time the <button> is clicked.

Modifying elements using this

Let’s say instead of pop-up alert on the screen, we wanted to change the color of the <button> every time we clicked it. How could we access the <button>'s properties from inside its event listener?

Since the button variable is an object, we can use the this keyword from within the object’s methods to access its properties:

In the example above, we attach a function to the button's onclick property, which creates an event listener.

From within the onclick function, the this keyword refers to the button object, since the function is attached to the button object. Using this from within an event listener is a common pattern that we will explore further in the next few examples.

Exercise

You can access a DOM element’s font color using Element.style.color. Use an event listener (and the random color generator) to change the button’s font color every time it is clicked.