Javascriptのイベント、特にバブリングが本当に好きですが、親の代わりにイベントを通して子どもに手を伸ばすような逆のバブリング効果を得ることができるかどうかは疑問です。キャプチャフェーズがあることはわかっていますが、これは実際にクリックやその他のカスタムイベントではなく機能します。DOMのリーフへの実際の逆のバブリング
だから、まったく可能ですか？
ありがとうございます！イベントオブジェクトのプロパティ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もあります（それもですaddEventListener経由でイベントを接続し、連結機能や矢印機能を使用していない場合はthis）。
これは祖先に達したのイベントから始まる、あなたがターゲット要素の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>