1

元素事件侦听器回调不适用于自定义事件，在以下代码中，将触发文档和窗口事件侦听器，但不会触发元素（在 IE11、FF33 和 Chrome38 上测试，结果相同。）有什么想法吗？我是否滥用了自定义事件？

var el = document.getElementById('some-elem');
el.addEventListener('custom', function (e) {
  console.log("Element got event: " + e.type);
}, false, true);

document.addEventListener('custom', function (e) {
  console.log("document got event: " + e.type);
}, false);

window.addEventListener('custom', function (e) {
  console.log("window got event: " + e.type);
}, false);

var evt = document.createEvent('CustomEvent');
evt.initCustomEvent('custom', true, false);
document.dispatchEvent(evt);
<div id="some-elem"></div>

4

1 回答 1

5

问题是事件永远不会通过元素，您正在触发事件document。相反，在元素上触发它：

var el = document.getElementById('some-elem');
el.addEventListener('custom', function (e) {
  console.log("Element got event: " + e.type);
}, false, true);

document.addEventListener('custom', function (e) {
  console.log("document got event: " + e.type);
}, false);

window.addEventListener('custom', function (e) {
  console.log("window got event: " + e.type);
}, false);

var evt = document.createEvent('CustomEvent');
evt.initCustomEvent('custom', true, false);
el.dispatchEvent(evt); // <=== Change is here
<div id="some-elem"></div>

回复您的评论：

在我的情况下，调度事件的对象与侦听对象不同，这是否意味着只能在同一个对象（窗口和文档除外）上侦听自定义事件？

事件必须穿过元素，就像 aclick必须穿过元素才能被click元素上的处理程序看到一样。因此，例如，如果您有一个div带有事件处理程序的 a，并且在img 内部有一个div，并且您在 上调度了事件，则img该处理程序div将触发，因为事件冒泡到它（因为您使事件冒泡-有能力的）：

var el = document.getElementById('some-elem');
el.addEventListener('custom', function (e) {
  snippet.log("Element got event: " + e.type);
}, false, true);

document.addEventListener('custom', function (e) {
  snippet.log("document got event: " + e.type);
}, false);

window.addEventListener('custom', function (e) {
  snippet.log("window got event: " + e.type);
}, false);

var evt = document.createEvent('CustomEvent');
evt.initCustomEvent('custom', true, false);
document.getElementById("some-span").dispatchEvent(evt); // <=== Change is here
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script><!-- snippet.js details: http://meta.stackexchange.com/a/242144/134069 -->
<div id="some-elem">
  <span id="some-span"></span>
</div>

DOM 事件规范中的这张图可能有助于描绘这些东西：

在此处输入图像描述

您调用的元素dispatchEvent是“目标”元素（该图中的深蓝色td）。

于 2014-11-08T14:12:23.870 回答