Question

我希望我的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>

Answer 1

您必须在您想要事件触发的元素上调度事件事件＆＃39;上。然后它将向下传播并备份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>

小提琴：https://jsfiddle.net/yrf9cvr3/

传播的工作原理：事件从document开始，然后按照调度的元素进行操作（您可以使用onCapture标记以这种方式捕获事件）。然后返回document。由于您要在document发送事件并不是真的去任何地方，只有document才会看到该事件。

Answer 2

试试这个。使用document.querySelector并指定要跟踪的事件。单击按钮或在文本框中键入一些文本

	<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">
	
	
	</div>
	</body>
    </html>

Answer 3

走极端。事件传播到它们被调度和备份的元素......所以为了在任何和基本上所有元素上触发事件（因为不知道哪个元素需要事件），你可以找到所有元素的“结束” 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
    }));
  });
}

https://jsfiddle.net/dkqagnph/1/

使用它将确保每个DOM元素（附加到主体）获取事件（假设没有元素停止传播本身），从而使得不需要知道哪些元素正在侦听或关心事件。这不会分发给每个单独的元素，因为这样会有点过分，但只是结束并让冒泡做它的事情。

注意：具有多个孩子的元素将多次获得该事件。您可能希望有一种方法可以确保您的代码多次运行，或者如果它运行多次则无关紧。

Answer 4

我发布了一些解决方案，而不是真正的答案。这会将自定义事件传播到DOM中的所有元素。

KSIĄŻKA:
TYTUŁ:                           "Ogniem i Mieczem"
AUTOR:                           Henryk Sienkiewicz
ROK WYDANIA:                                   1884
WYDAWNICTWO:                          Świat Książki
GATUNEK:                                    Powieść
LICZBA STRON:                                   758
CENA:                                     40.99 PLN

自定义事件的传播

4 个答案: