"自定義事件的傳播"
[英]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.