为什么手动“重置”事件不会冒泡到表单元素？

Question

为什么点击按钮时以下不触发警报？

document.addEventListener('reset', function(event) {
  alert('Reset clicked!');
});
  
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('span').dispatchEvent(new Event('reset', { bubbles: true }));
});

<form>
  <span>
    <button type="button">Reset</button>
  </span>
</form>

但是，如果我将

form

标签更改为

div

，它会按预期工作：

document.addEventListener('reset', function(event) {
  alert('Reset clicked!');
});
  
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('span').dispatchEvent(new Event('reset', { bubbles: true }));
});

<div>
  <span>
    <button type="button">Reset</button>
  </span>
</div>

我还尝试将事件名称更改为“重置”以外的名称，并且它再次按预期工作。

Answer 1

您必须将

span

更改为

form

因为在第一个示例中，当您在元素上手动分派重置事件时，它不会触发默认的表单重置行为，因此文档上的重置事件侦听器不会触发不会被触发。

说明：当您使用dispatchEvent在元素上分派事件时，该事件不会自动在DOM层次结构中向上冒泡。在您的情况下，当您在表单内的元素上分派“重置”事件时，它不会触发附加到文档的事件侦听器，因为该事件不会向上冒泡到文档级别。 为了使其工作，您需要确保事件在 DOM 层次结构中向上冒泡。这可以通过在创建事件时手动将 bubbles 属性设置为 true 来实现

document.addEventListener('reset', function(event) {
  alert('Reset clicked!');
});
  
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('form').dispatchEvent(new Event('reset', { bubbles: true }));
});

<form>
  <span>
    <button type="button">Reset</button>
  </span>
</form>