Question

我真的很喜欢Javascript中的事件，尤其是冒泡 - 但我一直在想是否有可能通过事件而不是父母来获得反向冒泡效果。我知道有捕获阶段 - 但这实际上只适用于点击和喜欢而不是自定义事件。

那么，它有可能吗？

谢谢！的Alessandro

Answer 1

我认为您可能正在寻找事件委派或至少与事件委派使用的内容相关的事件：事件对象的target属性。无论您在何处挂钩事件，target属性都会反映事件被分派到的元素。这意味着您可以在祖先元素上挂钩事件，但随后查看target属性以确定调度事件的后代。这是一个示例（我在这里使用click，但稍后会有一个自定义事件示例）：

document.getElementById("parent").addEventListener(
  "click",
  function(e) {
    console.log("Element clicked: " + e.target.id);
  },
  false
);

<p>Click either of the child elements below:</p>
<div id="parent">
  <div id="first-child">first child</div>
  <div id="second-child">second child</div>
</div>

还有currentTarget这是你挂钩事件的元素（如果你通过this连接事件并且你没有使用绑定或箭头函数，它也是addEventListener ）。

这意味着从一个到达祖先的事件开始，您可以通过循环目标元素的parentNode来跟踪其后代元素的整个路径：

document.getElementById("root").addEventListener(
  "click",
  function(e) {
    var path = [];
    for (var node = e.target; node != this; node = node.parentNode) {
      path.push(node.id);
    }
    console.log("Path: " + path.join(", "));
  },
  false
);

<p>Click below:</p>
<div id="root">
  <div id="branch-1-level-1">
    <div id="branch-1-level-2">
      <div id="branch-1-level-3">
        <div id="branch-1-level-4-child-1">branch-1-level-4-child-1</div>
        <div id="branch-1-level-4-child-2">branch-1-level-4-child-2</div>
      </div>
    </div>
  </div>
  <div id="branch-2-level-1">
    <div id="branch-2-level-2">
      <div id="branch-2-level-3">
        <div id="branch-2-level-4-child-1">branch-2-level-4-child-1</div>
        <div id="branch-2-level-4-child-2">branch-2-level-4-child-2</div>
      </div>
    </div>
  </div>
</div>

以下是自定义事件的示例：

Array.prototype.forEach.call(
  document.querySelectorAll("#root, #child2"),
  function(element) {
    element.addEventListener(
      "my-custom-event",
      function(e) {
        console.log("Element " + this.id + " got " + e.type + " on " + e.target.id);
      },
      false
    );
  }
);

// Fire a custom bubbling event at child2
var e = new CustomEvent("my-custom-event", {
  bubbles: true
});
document.getElementById("child2").dispatchEvent(e);

<div id="root">
  <div id="parent">
    <div id="child1">child1</div>
    <div id="child2">child2</div>
  </div>
</div>

实际反向冒泡到DOM中的叶子

1 个答案: