onchange 事件是否传播？

Question

我使用事件委托来侦听 DOM 中较低层的事件，但它不适用于选择框上的 onchange 事件。 onchange 事件是在 DOM 中传播还是冒泡？

谷歌搜索未能找到确凿的答案。

Answer 1

根据规格、

change

、

submit

、

reset

应起泡，

focus

和

blur

不应起泡。

此行为在除 IE 之外的所有 Web 浏览器中都能正确实现 < 9, that is,

change

、

submit

、

reset

在 IE >= 9 中正确实现气泡。

请参阅 https://stackoverflow.com/a/4722246/227299 了解旧 IE 版本上的 jQuery 解决方法

• http://www.quirksmode.org/dom/events/change.html
• http://quirksmode.org/dom/events/submit.html

Answer 2

在 jQuery 1.4+ 中，所有浏览器中的更改事件都会冒泡，包括 IE。

$('div.field_container').change(function() {
   // code here runs in all browers, including IE.
});

Answer 3

请注意，不同元素的更改事件在不同时间触发/冒泡。

对于

input type="text"

和

textarea

元素，更改事件在字段模糊之前不会触发/冒泡。

对于

select

、

input type="checkbox"

和

input type="radio"

，事件在更改后立即触发/冒泡。

使用 this fiddle （此演示的副本） 来测试其他表单元素。

演示：

const $ = document.querySelector.bind(document);

$('div#top').addEventListener('change', watchForChange);

function watchForChange(){
  $('#msg').textContent = 'Change event';
  setTimeout( () => {
    $('#msg').textContent = '';
  },800);
}

#msg{position:absolute;top:10%;left:35%;}

<div id="top">
  <select>
    <option>Change</option>
    <option>Other</option>
  </select>
  <div><input type="text" placeholder="Input text"></div>
  <div>CB: <input type="checkbox"></div>
  <div>RB: <input type="radio"></div>
  <div><textarea placeholder="textarea"></textarea></div>
</div>
<div id="msg"></div>

Answer 4

我已经有一段时间没有处理这个问题了，但上次处理时，我记得 Firefox 识别了

<SELECT>

元素上的事件，而 IE6 只识别了

<OPTION>

标签上的事件。据我所知。

当时IE7还没有出来。

因此，如果是这种情况，那么不内联编写事件处理程序并将其应用到准备好的 DOM 上就更有意义，以免产生大量污染的重复代码。

Answer 5

不确定我是否明白这个问题，但如果你是这个意思，那么不。

<div id="foo">
  <select onchange="alert('hi');">
    <option>Hello</option>
    <option>World</option>
  </select>
</foo>

div id="foo" 会有一个 onchange 事件...从选择列表中冒泡？

---

相关说明，仅供参考，您无法将事件附加到 IE 中选择列表中的选项（好吧，您可以，但它不会触发）