Question

我有一个JS脚本，它创建了一个新节点并将其插入HTML页面。我正在处理DOM突变事件并且可以捕获DOMNodeInserted事件。在该函数内部，我想找出源（即HTML的哪个部分已经调用了脚本函数）和目标（即在HTML页面中添加节点的部分）。

我可以使用event.target找到目标，但我无法找到事件的来源。

例如，请考虑以下伪代码HTML页面：

<html>
<head>
<script>
   function test() {
      //DOM access
      <div_object>.setAttribute("attr", "value");
   }
</script>
</head>
<body onload="test()">
   <div id="123">
   </div>
</body>
</html>

我希望我的源是BODY（因为那是脚本启动），target应该是div（123）（因为该属性被添加到div_123。

我该怎么做？

Answer 1

怎么样？

<html>
<head>
<script>
   function test(element) {
      //DOM access
      element.setAttribute("attr", "value");
   }
</script>
</head>
<body onload="test(this)">
   <div id="123">
   </div>
</body>
</html>

Answer 2

有趣。我看了一下（回答要格式化）

<html>
<head>
<script>
function test(e) {
  if (e) var event=e;
//DOM access
  var t="";
  for (o in event) t+='<br/>'+o+':'+event[o]
  document.getElementById('d123').innerHTML=t;
}
</script>
</head>
<body onload="test(event)">
   <div id="d123">
   </div>
</body>
</html>

Answer 3

很抱歉，您无法找到导致事件触发的代码段，它们完全解耦。您必须通过将自己的this / event.target的值存储在变量中来使触发代码合作，以便稍后获取触发的代码。

但是如果你有这样的合作，你就不需要DOM Mutation Events。

如果您有一个事件处理层（许多JS框架的一部分），您可以在该层中放置this / target跟踪，因此触发的代码可以询问“是什么在我面前被解雇的最后一个事件？“。

但我不相信这是值得的。通常最好添加自己的组件之间进行通信的协作钩子;你通常不能依赖DOM Mutation Events，因为它们不是全局的并且完全支持（或者在IE＆lt; 9上完全支持）。

如何找到启动javascript事件的位置？

3 个答案: