.on[event name] vs addEventListener

Question

I tried to create copy handler but I couldn't.

<!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;

and I copy from index.html, but js doesn't change span. but changing the js code to like this, The span is change.

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

Why did that happen? Sorry my terrible English :(

Does this answer your question? [Difference between document.addEventListener and window.addEventListener?](https://stackoverflow.com/questions/12045440/difference-between-document-addeventlistener-and-window-addeventlistener) — Simone Rossaini, Feb 02 '22 at 08:33
It's true i din't see [this](https://developer.mozilla.org/en-US/docs/Web/API/Window/copy_event), However [oncopy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy) is experimental I still recommend addEventListener. — Simone Rossaini, Feb 02 '22 at 08:40

Teemu · Accepted Answer · 2022-02-04T05:37:13.120

0

This happens because there's no oncopy property in window object. If you'd open the console, and wrote "window.onco", there's no oncopy in the suggestions. In the documentation this is not very clear, but when taking a look at 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 list, which of prologue says: "Listen to these events using addEventListener()". It looks like the article needs a small fix, as the prologue says also that these events can be attached with oneventname property, obviously that's not true in all cases.

edited Feb 04 '22 at 05:37

answered Feb 02 '22 at 08:59

Teemu

22,918
7
53
106

No the docs are correct, "the instance" they talk about is just not an instance of `Window`. – Kaiido Mar 10 '22 at 07:38
@Kaiido "_the oneventname property of this interface_" I'd assume "_this_" here refers to `Window` ..? Maybe the docs was changed recently, now it talks about interface. – Teemu Mar 10 '22 at 08:02
1

Ok I'll admit this is unclear, and anyway, DOMContentLoaded is in this list and it doesn't have an IDL handler. – Kaiido Mar 10 '22 at 08:10

Kaiido · Answer 2 · 2022-03-10T07:49:54.423

The copy event is not a GlobalEventHandler and thus doesn't have its own IDL handler available on window.
This event is defined to fire on an HTMLElement and that's where the oncopy IDL is accessible:

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

And because it's a DocumentAndElementEventHandler, you will also find it on document.

So if you want to catch the event on the window, that will be through bubbling and thanks to the addEventListener() method.

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

<input value="copy me">

Otherwise, you can use document's or any parent HTMLElement's event handler (e.g document.body):

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

<input value="copy me">

.on[event name] vs addEventListener

2 Answers2