.on[事件名称] 与 addEventListener

Question

我尝试创建复制处理程序，但我做不到。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>test</title>
    </head>
    <body>
        <h1>Test</h1>
        <span class = "test"></span>
        <script type = "text/javascript" src = "script.js"></script>
    </body>
</html>

function handleCopy() {
    document.querySelector("span.test").innerText = "Copied";
}
window.oncopy = handleCopy;

我从 index.html 复制，但 js 不会更改跨度。但是把js代码改成这样，跨度就变了。

function handleCopy() {
    document.querySelector("span.test").innerText = "Copied";
}
window.addEventListener("copy", handleCopy);

为什么会这样？对不起我糟糕的英语:(

Answer 1

发生这种情况是因为 window 对象中没有 oncopy 属性。如果您打开控制台并输入“window.onco”，建议中就没有 oncopy。在文档中，这不是很清楚，但是当查看 Event handlers, oncopy event is not listed, nor it can't be found on the following Event handlers implemented from elsewhere list. Instead, you can find it from Events 列表时，序言中的哪个说：“使用 addEventListener() 收听这些事件”。看起来这篇文章需要一个小的修正，因为序言还说这些事件可以用 oneventname 属性附加，显然这并非在所有情况下都是如此。

Answer 2

copy 事件不是 GlobalEventHandler，因此在 window 上没有自己的可用 IDL 处理程序。
此事件定义为在 HTMLElement 上触发，这就是 oncopy IDL 可访问的地方：

console.log("oncopy" in HTMLElement.prototype);

而且因为它是 DocumentAndElementEventHandler，您也可以在 document 上找到它。

因此，如果您想在 window 上捕获事件，那将通过冒泡并感谢 addEventListener() 方法。

addEventListener("copy", (evt) => {
  console.log("copied");
});

<input value="copy me">

否则，您可以使用 document 或任何父 HTMLElement 的事件处理程序（例如 document.body）：

document.oncopy = (evt) => {
  console.log("copied");
}

<input value="copy me">

.on[事件名称] 与 addEventListener

.on[event name] vs addEventListener

javascript

event-handling

addeventlistener