对象如何在JavaScript中实现Event接口 [英] How can an object implements the Event interface in JavaScript
问题描述
监听器
收到通知的对象（当发生指定类型的事件时，实现Event接口的对象。这必须是实现EventListener接口的对象，或者只是一个JavaScript函数。
它说我们可以使用一个实现Event接口的对象作为事件的监听器。
但是我找不到如何反对实现Event接口。正如我所尝试的那样：
document.querySelector（'＃demo'）。addEventListener （'click'，{handleEvent：function（e）{console.log（e）}}，false）
#demo {height：200px;背景：#ccc;}
<！DOCTYPE html> < html lang =en>< head> < meta charset =UTF-8> <标题>文件< /标题>< /头><身体GT; < div id =demo>< / div>< / body>< / html>
这个可以正确处理点击事件。
也许你可以给我一些关于此的文件。
在 DOM
回调接口EventListener {
void handleEvent（Event event）;
};
描述于 IDL索引，链接到 3.6。界面EventTarget ，再次在 3.8中提及。调度事件
至内部调用一个带有事件的对象，运行以下步骤：使用监听器的回调调用
用户对象的操作，handleEvent，
由event组成的参数列表，以及event的currentTarget
属性值作为回调此值。如果这会抛出
异常，则报告异常。
可以使用事件监听器来观察特定事件。
事件监听器包含以下字段：
- 类型（字符串）
- 回调（一个EventListener）
- 捕获（一个布尔值，最初为假）
- 被动（布尔值，最初为假）
- 一次（布尔值，最初为假）
- 已移除（用于记账的布尔值，最初为假）
尽管回调是一个 EventListener ，但从$ b可以看出上面的$ b字段，事件监听器是一个更广泛的概念。
引用回 EventListener 对象 handleEvent 是唯一命名的属性。
回调接口EventListener {
void handleEvent（活动事件）;
}
Web IDL 澄清
作为回调接口的
EventListener的定义是一个
的示例现有的API需要允许具有
给定属性的用户对象（在本例中为handleEvent）被视为
实现该接口。对于新的API，以及有
没有兼容性问题的API，使用回调函数将只允许
Function对象（在ECMAScript语言绑定中）。
回调接口是一个使用的接口
的回调关键字是其定义的开始。回调接口可以是用户对象实现的
而不是平台对象，如实现接口的§2.10对象中描述的
。回调接口标识符{
/ * interface_members ... * /
};
用户对象是作者将创建的，实现
回调接口，Web API使用它们来调用
作者定义的操作或向$ b发送和接收值$ b作者的程序通过操纵对象的属性。在
网页中，实现EventListener
接口的ECMAScript对象（用于注册DOM Events
实现调用的回调）将被视为用户对象。 / p>
请注意，用户对象只能实现回调接口，
平台对象只能实现非回调接口。
例如
document.querySelector（'＃demo'）。addEventListener（'点击'，{
abc：function（e）{
console.log（e）
}
}，false）
不会将事件发送到 abc 处理程序。虽然 handleEvent 标识符会调度事件。
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.
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
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).
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.
这篇关于对象如何在JavaScript中实现Event接口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
