没有点击按钮提交的表单

Question

这是我的第一个post。

我一直在开发 Chrome 扩展，昨天我遇到了这个问题。我已经解决了它，我只是不太明白为什么它会这样工作。所以如果有人能解释一下，谢谢！

所以，在我的 popup.html 中，我有一个带有提交按钮的表单（在 popup.js 中，一些复选框可能会在此表单中动态生成）：

    <div>
        <form id="confirmation">
            <div id="ing"></div>
            <div id="meth"></div>
            <button id="check" type="submit">Submit</button>
        </form>
    </div>

在脚本中，我有这段代码，目前运行良好：

let form = document.getElementById("confirmation");
form.onsubmit = () => {window.alert("submited")};

问题是在我有这个之前，当我点击扩展图标时触发了警报，没有提交表单：

let form = document.getElementById("confirmation");
form.addEventListener("submit", window.alert("submited"));

为什么会这样？

我对编程还很陌生。

来自葡萄牙的欢呼！

Answer 1

那是因为第二个参数是一个回调函数，而您只是在调用该函数。

这将 window.alert("submited") 的 return 值作为第二个参数传递

form.addEventListener("submit", window.alert("submited"));

这将传递一个函数，该函数在调用时会触发 window.alert

form.addEventListener("submit", () => { window.alert("submited") });

没有点击按钮提交的表单

Form submitted without button clicked

html

javascript

google-chrome

google-chrome-extension