CODEWITHSUNDEEP
javascriptdom-eventsaddeventlistener
tomision
tomision

Reputation: 994

How can an object implements the Event interface in JavaScript

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.

Upvotes: 7

Views: 2534

Answers (1)

guest271314
guest271314

Reputation: 1

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 EventListener as 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 interface

A 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.

Upvotes: 6

Related Questions