"自定义事件的传播"
[英]Propagation of custom events
问题描述
I expect my CustomEvent to be propagated from document to all the DOM elements.
我希望我的 CustomEvent 能够从文档传播到所有 DOM 元素。 For some reason, it does not happen.由于某种原因，它不会发生。 What am I doing wrong?我究竟做错了什么？
<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
You have to dispatchEvent the event on the element you want the event 'triggered' on.您必须在要“触发”事件的元素上 dispatchEvent 事件。 It will then propagate down and back up the DOM然后它将向下传播并备份 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
Try this one.试试这个。 Use document.querySelector and specify the events you want to track.使用 document.querySelector 并指定要跟踪的事件。 Click the button or type some text in the text box单击按钮或在文本框中键入一些文本
<html> <script> function onLoad() { \/\/ var myDiv = document.getElementById("myDiv"); \/\/ myDiv.addEventListener("myEvent",function(){alert("Yes!");}); \/\/ document.dispatchEvent(new CustomEvent("myEvent",{detail:null})); var myDiv = document.querySelector("#myDiv"); myDiv.addEventListener("click", myEventHandler, false); myDiv.addEventListener("change", myEventHandler, false); } function myEventHandler(e) { alert('Element was '+e.target.id+'\\nEvent was '+e.type); } <\/script> <body onload="onLoad()"> <div id="myDiv"> <input type="button" id= "Button 1" value="Button 1"><br> <input type="text" id="Text 2">
<\/body> <\/html><\/code><\/pre>
"
解决方案3
0 2016-12-22 17:18:21
Going with the extreme.走极端。 Events propagate down to the element they are dispatched on and back up... So in order to trigger an event on any and essentially all elements (since it is unknown which elements need the event) you can find the "ends" of all of the "branches" of the DOM and dispatch events to them.事件传播到它们被调度的元素并备份......因此，为了在任何和基本上所有元素上触发事件（因为不知道哪些元素需要事件），您可以找到所有元素的“结束” DOM 的“分支”并向它们发送事件。
jQuery makes it easy to select the end of the branches 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
I am posting some solution, not really an answer.我正在发布一些解决方案，而不是真正的答案。 This will propagate a custom event to all the elements in the DOM.这会将自定义事件传播到 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
By default Custom Events are not bubbled.默认情况下，自定义事件不会冒泡。
Reason being, Custom Event definition says:原因是，自定义事件定义说：
let event = new CustomEvent(type,[,options]).让事件 = 新的自定义事件（类型，[，选项]）。
Options have a flag : bubbles<\/strong><\/em> , which is false<\/strong><\/em> by default, we have to enable it.选项有一个标志：气泡<\/strong><\/em>，默认为false<\/strong><\/em> ，我们必须启用它。
Following will fix your code以下将修复您的代码
<html> <script> function onLoad() { var myDiv = document.getElementById("myDiv"); myDiv.addEventListener("myEvent",function(){alert("Yes!");}); document.dispatchEvent(new CustomEvent("myEvent",{detail:null,bubbles:true})); } <\/script> <body onload="onLoad()"> <div id="myDiv">
<\/body> <\/html><\/code><\/pre>
"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.