Listen to Events using Object Property Event Handlers

Instructor: [0:00] HTML attributes often have two representations. One representation is the HTML attribute itself and they are named content attributes. The other representation of these HTML attributes is properties on corresponding JavaScript DOM objects. These object properties are named IDL attributes or Interface Description Language attributes, which is a bit of a mouthful.

[0:30] As with the id HTML attribute, event handler attributes, such as onclick, also have a corresponding onclick object property. Here I am creating an object property event handler by assigning a function to the onclick property on the button object.

[0:53] Object property event handlers are a way to define an event listener in the bubble phase of an event. The same as HTML attribute event handlers, you cannot use this type of binding to listen to events in the capture phase.

[1:06] Object property event handlers are also classified as DOM zero event handlers alongside HTML attribute event handlers. An object property event handler function is provided with the event as the first and only argument to the function. The this context of the callback function is set to the element that the event handler is bound to.

[1:29] Here we can see that this is being set to button inside of our event handler. Because we are expressing our event handler function in JavaScript, we are free to modify the this binding of our function if we want to.

[1:44] Here I am using .bind to set the this context of my event handler function to be my this, which is an empty object. Now when my event handle executes, you will see that the this context inside of my event handler is now my this rather than the default binding, which would have been the button element.

[2:11] Sometimes people might unintentionally override the this runtime context in their event handler function by using arrow functions. Arrow functions lock the this context of a function to its parent scope. In this onclick function, it's this runtime context is always set to its parent scope.

[2:31] We have lost the default of this binding, which would have been, button. However, in practice, overriding the this value in event handlers generally isn't a big deal. You can often simply tell by looking at how the code is authored to know what element the event handler is bound to.

[2:49] In this case, it's clear that we're bound to button. You can also lean on the event.currentTarget property, which is a reference to the element that the event handler is bound to. In our case, this is going to be button.

[3:05] We'll come back to the event.currentTarget property and other event properties in an upcoming lesson. With an object property event handler, you can only add a single event handler per event type to an event. You cannot set two onclick functions for example. Here I am setting onclick to be a function called first and then I'm setting onclick to be a function called second.

[3:32] The second assignment has overridden the binding that I first created. Only being able to have one event handler for an event type on an element becomes problematic in larger projects, as you might want the ability to do a number of actions in response to an event type on an element. In all the projects, you might come across code like this.

[3:53] Here I am grabbing a reference to an existing button.onclick event handler. I'm then assigning a new onclick event handler. In this case, a new function called second. When this function is called, if any previous onclick existed, I'm going to execute that with the correct disk context, which will be our button.

[4:14] I'm going to parse in the event as a single argument. Then I'm going to do the logic that I wanted to do in the second function, which is log out the word second. By using this approach, I was able to fake having multiple event handlers. This acrobatics is no longer needed when using the eventTarget.addEventListener API, which we will get to in an upcoming lesson.

[4:39] To remove an object property event handler, you assign the corresponding object property to null.