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

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

那么，有可能吗？

谢谢！
亚历山德罗

最佳答案

我认为您可能正在寻找事件委托或至少与事件委托使用什么有关的东西：事件对象的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挂接事件并且未使用bound或arrow函数，它也是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>

关于javascript - 实际反向冒泡到DOM中的叶子，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37521406/