点击按钮并删除后表单未执行submit事件的原因咨询

问题说明 #

点击按钮时，点击事件会冒泡到表单并执行对应的回调，但删除按钮后，预期触发的formSubmitCallback并未执行。想知道该行为的原因，不需要解决方案，仅需解释这一现象。

代码示例 #

HTML

<form onsubmit="formSubmitCallback()" onclick="formClickCallback()">
  <div onclick="divCallback()">
    <button id="button" onclick="buttonCallback()">
      click me
    </button>
  </div>
</form>

JavaScript

function buttonCallback() {
  console.log("button")
  document.getElementById("button").remove()
}

function divCallback() {
  console.log("div")
}

function formClickCallback() {
console.log("form click")
}

function formSubmitCallback() {
  console.log("form submit")
}

执行结果 #

"button"
"div"
"form click"

行为解释 #

浏览器处理表单提交按钮的点击逻辑是这样的：

• 首先触发按钮的点击事件，然后按照冒泡顺序依次执行父元素、表单的点击回调。
• 等所有点击事件的回调都执行完毕后，浏览器才会触发表单的submit事件（这是按钮点击的默认行为之一）。

但浏览器触发submit事件有个前提：触发点击的提交按钮必须仍然存在于DOM中，且属于该表单的后代元素。你的代码里，buttonCallback已经把按钮从DOM中移除了，当点击事件的所有冒泡回调执行完后，浏览器验证触发源时发现按钮已不存在，因此不会触发表单的submit事件，formSubmitCallback自然也就不会被调用。

内容的提问来源于stack exchange，提问作者Tudor P.