不会触发提交提交类型输入的事件

Question

我写了一个愚蠢的例子来看看这两个中的哪个,click或者submit事件,首先在类型的输入上触发submit.

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

单步调试器中的代码会显示以下一系列事件.

1. 它首先触发click事件处理程序,将文本"click"写入控制台,但随后不久,文本从控制台中消失.

2. 此外,该submit事件永远不会被解雇.

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

以下是相关代码,这是完整的工作示例.它只是一个简单的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

我不明白的是为什么它没有进入我的提交事件处理程序？

input元素没有submit事件.您需要挂钩submit的form,而不是input.

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

(如果您愿意,btn.form可能会有更广泛的支持,并且(也)标准化.或者,当然,使用或检索元素.)btn.closest("form")btn.formgetElementByIdquerySelectorform

实例:

(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>