7

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.

9
  • 1
    What is your question? You have declared a correct object with properly named interface function, and your code is working. It is exactly what "implements interface" means in JavaScript. Duck typing: If is has a function named handleEvent, then it implements Event interface. Commented Nov 1, 2016 at 3:33
  • I can't find how can object to implement the Event interface - yet you then post some code, which works, and you say This one can handle click event right. ... so, voilà - you've found an object that implements it Commented Nov 1, 2016 at 3:35
  • @Yeldar Kurmangaliyev Thanks, from I was reading source code of iScroll, I begin know this way to write event listener.As you know, we can write lots of functions in object, so when I give the addEventListener the object that contains many functions, the dispatch event will trigger which one? Commented Nov 1, 2016 at 3:39
  • yes, it will do that Commented Nov 1, 2016 at 3:40
  • 1
    @guest271314 No, as we all know, we can give the function to the addEventListener to handle the event. From the mozilla, we can give the object too. So I wanna some info about the rquirement of the object. But I cannot find something. Commented Nov 1, 2016 at 3:49

1 Answer 1

6

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.