"自定义事件的传播"
[英]Propagation of custom events
问题描述
我希望我的 CustomEvent 能够从文档传播到所有 DOM 元素。 由于某种原因，它不会发生。 我究竟做错了什么？
<html>
<script>
function onLoad() {
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("myEvent",function(){alert("Yes!");});
document.dispatchEvent(new CustomEvent("myEvent",{detail:null}));
}
</script>
<body onload="onLoad()">
<div id="myDiv"></div>
</body>
</html>
5 个解决方案
解决方案1
0 2016-12-22 16:29:54
您必须在要“触发”事件的元素上 dispatchEvent 事件。 然后它将向下传播并备份 DOM
<html>
<script>
function onLoad() {
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("myEvent",function(){alert("Yes!");});
myDiv.dispatchEvent(new CustomEvent("myEvent",{detail:null}));
}
</script>
<body onload="onLoad()">
<div id="myDiv"></div>
</body>
</html>
解决方案2
0 2016-12-22 16:32:10
试试这个。 使用 document.querySelector 并指定要跟踪的事件。 单击按钮或在文本框中键入一些文本
解决方案3
0 2016-12-22 17:18:21
走极端。 事件传播到它们被调度的元素并备份......因此，为了在任何和基本上所有元素上触发事件（因为不知道哪些元素需要事件），您可以找到所有元素的“结束” DOM 的“分支”并向它们发送事件。
jQuery 可以很容易地选择分支的结尾
function onLoad() {
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("myEvent", function() {
alert("Yes!");
});
$(':not(:has(*))').each(function(i, el){
el.dispatchEvent(new CustomEvent("myEvent", {
detail: null,
bubbles: true
}));
});
}
解决方案4
0 2016-12-22 17:29:46
我正在发布一些解决方案，而不是真正的答案。 这会将自定义事件传播到 DOM 中的所有元素。
<html>
<script>
document.dispatchCustomEvent = function(event) {
function visit(elem,event) {
elem.dispatchEvent(event);
var child = elem.firstChild;
while(child) {
if(child.nodeType==1) visit(child,event);
child = child.nextSibling;
}
}
visit(document.documentElement,event);
}
function onLoad() {
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("myEvent",function(){alert("Yes!");});
document.dispatchCustomEvent(new CustomEvent("myEvent",{detail:null}));
}
</script>
<body onload="onLoad()">
<div id="myDiv"></div>
</body>
</html>
解决方案5
0 2022-02-03 01:12:09
默认情况下，自定义事件不会冒泡。
原因是，自定义事件定义说：
让事件 = 新的自定义事件（类型，[，选项]）。
选项有一个标志：气泡<\/strong><\/em>，默认为false<\/strong><\/em> ，我们必须启用它。
以下将修复您的代码
如何在自定义事件中停止事件传播/冒泡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.