Javascript 僅單擊事件在頁面重新加載時觸發然后不起作用

Question

我正在寫一個小型練習網站。 相關 HTML：

...
<body>
    <div id="button">CLICK ME</div>
    <script src="assets/js/app.js"></script>
</body>
...

我的 app.js 文件有以下代碼：

document.querySelector("#button").addEventListener("click", new function() {
    alert("test");
});

當我重新加載頁面時，事件觸發。 之后，單擊div什么也不做。 是什么導致了這個問題，我該如何解決？

Answer 1

新功能（）只使用 function

document.querySelector("#button").addEventListener("click", function() {
    alert("test");
});

Answer 2

addEventListener的第二個參數引用了 function。 將new放在前面，創建一個新的 object 並應用匿名 function 作為構造函數。 所以它的返回值是object而不是 function，這正是您所需要的。

因此，您的代碼需要是（如 Met Byrdy 所指出的）：

document.querySelector("#button").addEventListener("click", function() {
    alert("test");
});

只是為了好玩，我會給你一種在這種情況下實際使用new的方法。 您可以使用new Function語法來做到這一點：

document.querySelector("#button").addEventListener("click", new Function("alert('dsds')"));

不是我推薦它，而是認為您應該知道也有一種方法可以編寫這樣的 function。

參考： https://javascript.info/new-function

Answer 3

addEventListener 需要兩個 arguments，第二個參數是 function，您希望偵聽器在每次觸發事件時調用，在您的情況下為“單擊”事件。

When you put "new" in front of the function it changes the function into a constructor function that creates a class instance ( returns an object ). 這就是為什么您需要使用沒有新關鍵字的 function，如下所示。

document.querySelector("#button").addEventListener("click", function() {
    alert("test");
});

- 編輯 -

你可以檢查這個stackoverflow問題

Javascript 僅單擊事件在頁面重新加載時觸發然后不起作用

問題描述

3 個解決方案

解決方案1
2 2021-02-27 19:52:17

解決方案2
2 已采納 2021-02-27 20:01:51

解決方案3
0 2021-02-27 19:59:37

Javascript 僅單擊事件在頁面重新加載時觸發然后不起作用

問題描述

3 個解決方案

解決方案1 2 2021-02-27 19:52:17

解決方案2 2 已采納 2021-02-27 20:01:51

解決方案3 0 2021-02-27 19:59:37

解決方案1
2 2021-02-27 19:52:17

解決方案2
2 已采納 2021-02-27 20:01:51

解決方案3
0 2021-02-27 19:59:37