Interface object of EventListener in addEventListener

This article mainly introduces the EventListener interface object in addEventListener, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Write it first

Missing knowledge point: The second parameter of addEventListener can not only be passed in a function, but also an object that implements the EventListener interface.

Description in the document

listener

When the event type being listened to is triggered, an event notification will be received (implementing Event interface object) object. listener must be an object that implements the EventListener interface, or a function

Excerpted from MDN

I have always been# Pass a function into ##listener to implement some logic by listening for events. However, I saw that the document description first mentioned "an object that implements the EventListener interface." After further viewing the document, I learned that this object refers to an object containing the handleEvent method.

var obj = {
   // ...
    handleEvent: function(event) {
        // ...
        console.log('event', event)
    }
}
document.body.addEventListener('click', obj, false)

When the event registered by

EventListener occurs, this method will be called, and an event parameter will be passed into the method.

After understanding the concept, we need to see what benefits this knowledge point can bring to actual development

Applications under development

For example

The above is the detailed content of Interface object of EventListener in addEventListener. For more information, please follow other related articles on the PHP Chinese website!