元素事件侦听器回调不适用于自定义事件

Question

元素事件侦听器回调不适用于自定义事件，在以下代码中，将触发文档和窗口事件侦听器，但不会触发元素（在 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>

Answer 1

问题是事件永远不会通过元素，您在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>

---

回复您的评论：

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

事件必须穿过元素，就像click必须穿过元素才能被元素上的click处理程序看到一样。 因此，举例来说，如果你有一个div与事件处理程序就可以了，有一个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 ）。