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

Question

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

那么，这可能吗？

谢谢!亚历山德罗

Answer 1

我认为您可能正在寻找事件委托(delegate)或至少与事件委托(delegate)使用的内容相关的内容:事件对象的target属性。无论您在何处 Hook 事件，target 属性都会反射(reflect)事件分派(dispatch)到的元素。这意味着您可以在祖先元素上 Hook 事件，然后查看 target 属性来确定事件分派(dispatch)到的后代元素。这是一个示例(我在这里使用 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 ，它是您 Hook 事件的元素(如果您通过 addEventListener Hook 事件，它也是 this 并且您不要使用绑定(bind)或箭头函数)。

这意味着从到达祖先的事件开始，您可以通过循环目标元素的 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>