Menu
In this .addEventListener in MDN
listener
The object that receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.
It says we can use an object that implements the Event interface as listener for the event.
But I can't find how can object to implement the Event interface. As I tried:
document.querySelector('#demo').addEventListener('click', {
handleEvent: function (e) {
console.log(e)
}
}, false)#demo {
height: 200px;
background: #ccc;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
</body>
</html>This one can handle click event right.
Maybe you can give me some documents about this.
628
Whenever you interact with your browser, your browser creates an event object. This event object has properties that describe that interaction. In order to convert any given event into productive work, we need to create an “event handler” and register it with an element object from the DOM. For example: someElement.
The addEventListener() is an inbuilt function in JavaScript which takes the event to listen for, and a second argument to be called whenever the described event gets fired. Any number of event handlers can be added to a single element without overwriting existing event handlers.
At DOM
callback interface EventListener {
void handleEvent(Event event);
};
is described at IDL Index, which links to 3.6. Interface EventTarget, mentioned again at 3.8. Dispatching events
To inner invoke an object with event, run these steps: Call a user object’s operation with listener’s callback, "
handleEvent", a list of arguments consisting of event, and event’s currentTarget attribute value as the callback this value. If this throws an exception, report the exception.An event listener can be used to observe a specific event.
An event listener consists of these fields:
- type (a string)
- callback (an EventListener)
- capture (a boolean, initially false)
- passive (a boolean, initially false)
- once (a boolean, initially false)
- removed (a boolean for bookkeeping purposes, initially false)
Although callback is an EventListener, as can be seen from the fields above, an event listener is a broader concept.
which references back to the EventListener object where handleEvent is the only named property.
callback interface EventListener {
void handleEvent(Event event);
}
Web IDL clarifies
2.2. Interfaces
The definition of
EventListeneras a callback interface is an example of an existing API that needs to allow user objects with a given property (in this case "handleEvent") to be considered to implement the interface. For new APIs, and those for which there are no compatibility concerns, using a callback function will allow only a Function object (in the ECMAScript language binding).
callback interfaceA callback interface is an interface that uses the callback keyword at the start of its definition. Callback interfaces are ones that can be implemented by user objects and not by platform objects, as described in §2.10 Objects implementing interfaces.
callback interface identifier { /* interface_members... */ };2.10. Objects implementing interfaces
User objects are those that authors would create, implementing callback interfaces that the Web APIs use to be able to invoke author-defined operations or to send and receive values to the author’s program through manipulating the object’s attributes. In a web page, an ECMAScript object that implements the EventListener interface, which is used to register a callback that the DOM Events implementation invokes, would be considered to be a user object.
Note that user objects can only implement callback interfaces and platform objects can only implement non-callback interfaces.
For example
document.querySelector('#demo').addEventListener('click', {
abc: function (e) {
console.log(e)
}
}, false)
does not dispatch event to abc handler. Though handleEvent identifier does dispatch event.
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
