https://developer.mozilla.org/en/DOM/element.addEventListenerの記事を読みましたが、useCapture
属性を理解できません。定義があります:
trueの場合、useCaptureはユーザーがキャプチャを開始したいことを示します。キャプチャを開始した後、指定されたタイプのすべてのイベントは、DOMツリー内のその下のEventTargetsにディスパッチされる前に、登録されたリスナーにディスパッチされます。ツリー全体を上方向にバブルしているイベントは、キャプチャを使用するように指定されたリスナーをトリガーしません。
このコードでは、子の前に親イベントがトリガーされるため、その動作を理解できません。Documentオブジェクトのusecaptureがtrueで、子divのusecaptureがfalseに設定されており、ドキュメントのusecaptureに従っているため、ドキュメントプロパティが子よりも優先されます。
function load() {
document.addEventListener("click", function() {
alert("parent event");
}, true);
document.getElementById("div1").addEventListener("click", function() {
alert("child event");
}, false);
}
<body onload="load()">
<div id="div1">click me</div>
</body>
no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget
。私はすべてのブラウザをテストしたわけではないので、すべて同じ方法で実装する可能性があります。ただし、キャプチャイベントは、非キャプチャイベントの前に実行されます。