この記事では、イベントのバブリングとキャプチャについて説明し、JS イベント ターゲットの検索方法 (バブリングとキャプチャ)、イベント プロキシ、e.target と e.currentTarget の違い、バブリングとキャプチャの防止、キャンセルについて理解できるようにします。デフォルトのイベントです。皆さんのお役に立てば幸いです!
イベント ターゲットとは、イベントがバインドされている要素 elemet を指します。 .addEventListener('click',function(){}) ここの要素はイベント ターゲットです。
#バブリングとキャプチャ:
イベントはデフォルトで下から上にバブリング実行されます。クリック イベントを例に挙げると、子要素をクリックすると、親要素以降のクリック イベントもトリガーできます。イベントの実行順序は下から上、つまりバブリング イベントです。
もちろん、トップダウンのキャプチャ方法もあります。引き続きクリック イベントを例に挙げると、子要素がクリック イベントにバインドされ、その子要素をクリックすると、親要素およびその上の要素にバインドされたクリック イベントも実行されます。イベントの実行順序は上から下、つまりキャプチャ イベントです。
type: イベント タイプ
重要なポイント! ！イベント ターゲットをトリガーするプロセス全体は 2 つの段階 (キャプチャとバブリング) に分かれています。 useCapture この値は、イベント ターゲットのトリガーがどの段階で実行されるかを決定します。
バブリングとキャプチャーのシーケンス分析:
コードのデモ:
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(){
console.log("这是div1的点击事件");
},false);
div2.addEventListener('click',function(){
console.log("这是div2的点击事件");
},false);
div3.addEventListener('click',function(){
console.log("这是div3的点击事件");
},false);
</script>
[div3] をクリックしたまま、
div1.addEventListenerの 3 番目のパラメータを true に変更します。以下に示すように、div1 が最初に実行され、キャプチャが行われたことを示します。バブリングフェーズを優先します。
これを読んだ後は、必ず入力してください。すべての状況をリストしたわけではありません。残りの状況は、要約してみるために残しておきます (これだけで十分です)上記を理解してください。実際のコーディングはそれほど複雑ではありません)。 上記は、イベント ターゲット検索の 2 つのメカニズム
と 
イベント バブリングを使用してイベント プロキシ メカニズムを完成させます:
li にバインドする必要がある場合、クリックして li のコンテンツを取得します。通常、要素をトラバースしてクリック イベントをバインドします。 let lis = document.querySelectorAll('li');
for (let i = 0; i
イベント ソース、イベント ID、イベント タイプ、イベント バインド要素、イベントがトリガーされたときのクリック位置などが含まれます。 このうち、e.target は、このイベントのトリガー元であるイベント ソースにアクセスできます。 <p><strong>既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“e.target”+“冒泡机制”就可以减少事件的绑定，能提升不少的性能。</strong></p>
<p>依次点击列表1与列表2：</p>
<p><img src="https://img.php.cn/upload/image/607/859/198/165961728965853JavaScript%20%E3%81%A7%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E3%83%90%E3%83%96%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%A8%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AF%E3%80%81%E3%81%93%E3%81%A1%E3%82%89%E3%82%92%E3%81%94%E8%A6%A7%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82" title="165961728965853JavaScript でのイベントのバブリングとキャプチャの詳細については、こちらをご覧ください。" alt="JavaScript でのイベントのバブリングとキャプチャの詳細については、こちらをご覧ください。"></p>
<p><strong>总结：通过上面代码我们知道了“事件对象”+“冒泡机制”可以实现事件委托。事件委托就是当事件触发时，通过事件冒泡(或事件捕获)把要做的事委托给父元素来处理。</strong></p>
<h2>三、e.target与e.currentTarget的区别：</h2>
<ul>
<li>e.target 指向的是触发事件监听的对象（事件源）。</li>
<li>e.currentTarget 指向添加监听事件的对象（绑定事件的dom元素）。</li>
</ul>
<h2>四、阻止冒泡与捕获</h2>
<p><strong><span style="font-size: 18px;">为什么要阻止冒泡或捕获？</span></strong></p>
<p>点击当前元素时以冒泡的方式传递事件如果上级元素绑定了同样的事件，就会因为冒泡传递导致触发。同样捕获的过程中，也会触发与当前元素绑定的相同事件的上级。只是触发顺序不同。</p>
<p>事件代理一般使用的冒泡，当然阻止冒泡一般不会影响事件代理，因为顺序问题只会影响捕获事件，这也是为什么都使用冒泡实现事件代理机制。</p>
<p><strong><span style="font-size: 18px;">阻止冒泡或捕获的方法</span></strong></p>
<p>这里我不考虑兼容性问题，我相信不久将来兼容性可以得到解决。</p>
<p>阻止冒泡w3c推介的方法是event.stopPropagation()，顾名思义停止传播，他是事件对象（event）的方法，此方法是<code>阻止目标元素的继续冒泡（或捕获）。
event.stopPropagation()阻止冒泡：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.onclick = function (e) {
alert('div1');
}
div2.onclick = function (e) {
e.stopPropagation();
alert('div2');
}
div3.onclick = function (e) {
alert('div3');
}
</script>
上面代码默认都是冒泡事件，我们点击div3会依次弹出’div3’与’div2’，为什么没有弹出’div1’这是因为e.stopPropagation();阻止了目标元素的事件继续冒泡到上级。如果每个点击事件都加上了e.topPropagation就不会出现多弹窗的情况。
event.stopPropagation()阻止捕获：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(e){
console.log('div1');
},true);
div2.addEventListener('click',function(e){
console.log('div2');
e.stopPropagation();
},true);
div3.addEventListener('click',function(e){
console.log('div3');
},true);
</script>
当我们点击div2会依次弹出’div1’与’div2’，这也是因为在div2事件中我们设置了e.stopPropagation()，阻塞了目标元素的事件继续向下捕获。
event.target == event.currentTarget：
div.addEventListener('click',function(e){
if(event.target == event.currentTarget){
//需要执行的代码
}
});此方法不过多解释用的不多，如果你理解了上面的内容，这个方法也能理解。
addEventListener()
从上面代码不难看出addEventListener()有如下的优点（以下是MDN的原话）：
addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：
listener 的触发阶段。（即可以选择捕获或者冒泡）。event.preventDefault()
默认事件指的是<a href=""></a>，<input type="submit"> 标签这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生。
<a>点击跳转</a>
<script>
let a = document.querySelector('a');
addEventListener('click',function(e){
e.preventDefault();
})
</script>
那么我们如何才能知道一个标签是否有默认事件，打印事件对象的cancelable属性，通过事件执行就可以知道e.cancelable的结果，如果为false表示有默认事件，true则没有。
return false;
事件执行函数中设置return false取消默认事件，但此方法不常用。
【相关推荐：javascript学习教程】
以上がJavaScript でのイベントのバブリングとキャプチャの詳細については、こちらをご覧ください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![JavaScript コアチュートリアル [JS が知っておくべき DOM BOM 操作]](https://img.php.cn/upload/course/000/000/041/61c56ae28d02a390.jpg)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
