この記事では、JSのイベントキャプチャモデルとバブルモデルについて説明します。参照のためにそれを共有してください。
特定の実装方法は次のとおりです。
例1：
次のようにコードをコピーします：<html>
<head>
<script type = "text/javascript">
window.onload = function（）{
document.getElementById（ 'par'）。addeventlistener（ 'click'、function（）{alert（ 'par'）;}、true）;
document.getElementById（ 'Son'）。AddEventListener（ 'click'、function（）{alert（ 'son'）;}、true）;
}
</script>
<style type = "text/css">
#par {width：300px; height：200px; background：gray;}
#son {width：200px; height：100px;背景：緑;}
</style>
</head>
<body>
<div id = "par">
<div id = "son"> </div>
</div>
</body>
</html>
例2：
次のようにコードをコピーします：<html>
<head>
<script type = "text/javascript">
window.onload = function（）{
document.getElementById（ 'par'）。addeventlistener（ 'click'、function（）{alert（ 'par'）;}）;
document.getElementById（ 'Son'）。AddEventListener（ 'click'、function（）{alert（ 'son'）;}）;
}
</script>
<style type = "text/css">
#par {width：300px; height：200px; background：gray;}
#son {width：200px; height：100px;背景：緑;}
</style>
</head>
<body>
<div id = "par">
<div id = "son"> </div>
</div>
</body>
</html>
AddEventListener：3番目のパラメーターはオプションのパラメーターであり、デフォルトでは偽りであり、バブルモデルを示します。つまり、最小のレイヤーが最初にトリガーされます（Div id is Son）。そして、真のパラメーターが追加された場合、それはそのようなレベルに応じてトリガーするキャプチャモデル（HTML - > body ---> divから）であることを意味します。
例1のHTMLコードには2つのDIVがあります。小さなdivは大きなdivに含まれています。小さなdivをクリックすると、アラート（ 'par'）イベントが最初にトリガーされます。そして、アラート（「息子」）全体がトリガーされます。例2はまったく逆です。
「object.onclick」属性を使用してイベントをトリガーすると、バブルモデルが使用されます。
IEはAddEventListenerをサポートしていませんが、ActitsEventを使用します。ただし、AttachEventは3番目のパラメーターをサポートせず、モデルをキャプチャしません。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。