javascript - 未触发提交类型输入的提交事件

Question

我写了一个愚蠢的示例来查看 click 或 submit 事件中的哪一个首先在 submit 类型的输入上触发>.

但是，当我运行它时，没有任何内容写入控制台。

单步执行调试器中的代码揭示了以下一系列事件。

1. 它首先触发 click 事件处理程序，将文本“click”写入控制台，但不久之后，该文本从控制台中消失。

2. 此外，永远不会触发 submit 事件。

我推断表单是在执行按钮的 click 事件后提交的。我不明白的是为什么它没有进入我的 submit 事件处理程序？

下面是相关代码，这里是the full working example .它只是一个简单的 HTML 文件，您可以下载并在您的机器上试用。

(function() {
let btn = document.getElementById("btnSave");

btn.addEventListener("click", function(event) {
	console.log("click");
}, false);
btn.addEventListener("submit", function(event) {
	console.log("submit");
	// event.preventDefault();
}, false);

console.log("All done now. Click da button, chum, click it I say!");

})();

div { margin: 20px; }
input[type="submit"] { width: 200px; height: 50px; }

<div>Look at the console and then click the button, chum!</div>

<div>
    <form>
        <input type="submit" id="btnSave" value="Save" width="200px" />
    </form>            
</div>

Answer 1

The thing I don't understand is why it isn't getting into my submit event handler?

input 元素没有 submit 事件。您需要在 form 上 Hook submit，而不是 input。

btn.form.addEventListener("submit", function(event) {
// ^^^^^
  console.log("submit");
  event.preventDefault();
}, false);

(btn.form 如果您愿意，可以有 btn.closest("form")，尽管 btn.form 更广泛- 受支持并且(也)是 standardized。或者，当然，使用 getElementById 或 querySelector 来检索 form 元素。)

实例:

(function() {
  let btn = document.getElementById("btnSave");

  btn.addEventListener("click", function(event) {
    console.log("click");
  }, false);
  btn.form.addEventListener("submit", function(event) {
  // ^^^^^
    console.log("submit");
    event.preventDefault();
  }, false);

  console.log("All done now. Click da button, chum, click it I say!");

})();

div {
  margin: 20px;
}

input[type="submit"] {
  width: 200px;
  height: 50px;
}

<div>Look at the console and then click the button, chum!</div>

<div>
  <form>
    <input type="submit" id="btnSave" value="Save" width="200px" />
  </form>
</div>