js_javascriptスキルにおけるイベントキャプチャモデルとバブリングモデルの分析例

この記事の例では、js でのイベント キャプチャ モデルとバブリング モデルについて説明します。皆さんの参考に共有してください。

具体的な実装方法は以下のとおりです。

例 1:

コードをコピー コードは次のとおりです:

<頭>
<スクリプトタイプ="text/javascript">
window.onload = function(){
document.getElementById('par').addEventListener('click',function() {alert('par');},true);
document.getElementById('son').addEventListener('click',function() {alert('son');},true);
}

例 2:

コードをコピー コードは次のとおりです:

<頭>
<スクリプトタイプ="text/javascript">
window.onload = function(){
document.getElementById('par').addEventListener('click',function() {alert('par');});
document.getElementById('son').addEventListener('click',function() {alert('son');});
}

addEventListener: 3 番目のパラメーターはオプションです。デフォルトでは false です。これは、true パラメーターが追加された場合、バブリング モデル、つまり最小のレイヤー (son の ID を持つ div) が最初にトリガーされることを意味します。 、これはモデル (html-->body--->div から) を意味し、このレベルでトリガーされます。

例 1 の HTML コードには 2 つの div が含まれています。小さい div がクリックされると、alert('par') イベントが最初にトリガーされます。 ) イベントがトリガーされます。例 2 はその逆です。

「object.onclick」属性を使用してイベントをトリガーする場合、バブリング モデルが使用されます。

IE は addEventListener をサポートしていませんが、attachEvent を使用します。ただし、attachEvent は 3 番目のパラメータをサポートしていないため、モデルをキャプチャしません。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。