JavaScript のイベント モデルをすばやく理解するのに役立ちます

この記事では、主に javascript のイベント モデルを紹介します。これには、DOM0 レベルのイベント モデルと DOM2 レベルのイベント モデル (イベント キャプチャとイベント バブリング、DOM2 レベルの登録イベントと非アクティブ化イベント) が含まれます。こちらの記事を参考にしてください

JavaScriptにはDOM0とDOM2という2つのイベントモデルがあります。この 2 つの時代のモデルについては、今までよくわかりませんでしたが、ネットで情報を調べてようやく少し理解できました。

1. DOMレベル0イベントモデル

DOMレベル0イベントモデルは、すべてのブラウザでサポートされている初期のイベントモデルであり、その実装は比較的簡単です。コードは次のとおりです:

<p id = &#39;click&#39;>click me</p>
<script>
 document.getElementById(&#39;click&#39;).onclick = function(event){
  alert(event.target);
 }
</script>

この種のイベント モデルは、dom オブジェクト にイベント名を直接登録します。このコードは、p タグに onclick イベントを登録し、イベント関数内でクリック ターゲットを出力します。イベントを閉じるのはさらに簡単で、次のように null をイベント関数にコピーするだけです:

document.getElementById('click'_).onclick = null;
このことから、dom0 では、dom オブジェクトは同じ型の関数を 1 つだけ登録できることがわかります。同じ種類を登録すると上書きされ、以前に登録した機能は無効となります。

var click = document.getElementById('click');
click.onclick = function(){
 alert('you click the first function');
};
click.onclick = function(){
 alert('you click the second function')
}

このコードではDOMオブジェクトに対して2つのonclick関数を登録しましたが、結果として2番目に登録された関数のみが実行され、先に登録された関数は上書きされてしまいました。

2. DOM2レベルのイベントモデル

1. イベントキャプチャとイベントバブリング(キャプチャ、バブル)

まず、IE8以下はこのイベントモデルをサポートしていません。イベントキャプチャとイベントバブリングのメカニズムは次のとおりです:

上図に示すように、123 はイベントキャプチャを表し、4567 はイベントバブリングを表します。まず次のコードを使用します:

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>

ID inner で p をクリックすると、このときのイベント フローは最初にキャプチャ フェーズ: document-html-body-p (outer) を実行します。次に、バブリング フェーズ、p(inner)-p(outer)-body-html-document を実行します。

2. DOM2レベルでのイベントの登録と非アクティブ化

DOM2レベルでaddEventListenerとremoveEventListenerを使用して、イベントの登録と非アクティブ化を行います（IE8以前のバージョンではサポートされていません）。この関数の以前の方法と比較した利点は、DOM オブジェクトに同じ種類のイベントを複数登録でき、イベントの上書きが発生せず、各イベント関数が順番に実行されることです。

addEventListener('イベント名', 'イベントコールバック', 'キャプチャ/バブル')。例は次のとおりです。

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>
<script>
 var click = document.getElementById(&#39;inner&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;click one&#39;);
 },false);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;click two&#39;);
 },false);
</script>

まず、addEventListenr の最初のパラメータがイベント名であることを知っておく必要があります。また、3 番目のパラメータはキャプチャまたはバブリングを表します。はキャプチャ イベントを表し、false はバブル イベントを表します。

このコードでは、inner p に 2 つのクリック イベント関数を登録しました。その結果、ブラウザーはこれら 2 つの関数を順番に実行します。
ここで、イベントストリーム生成メカニズムの使用方法を説明します。

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>
<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;inner show&#39;);
 },true);
 clickouter.addEventListener(&#39;click&#39;,function(){
  alert(&#39;outer show&#39;);
 },true);
</script>

このコードでは、キャプチャ イベントを使用します。inner は external にネストされているため、capture を使用する場合は、outer が最初にイベントをキャプチャする必要があり、その後、inner がイベントをキャプチャできることがわかります。その結果、外側が最初に実行され、次に内側が実行されます。

ではアウターの実行タイミングをバブリング段階に変更したらどうなるでしょうか？

alickouter.addEventListener('click',function(){
 alert('outer show'); 
},false);

この場合、最初にinnerが実行され、次にouterが実行されます。同様に、両方のイベントの実行タイミングをバブリング ステージに変更した場合でも、内側が最初に実行され、次に外側が実行されます。次に、別の問題が発生します。つまり、内部に 2 つのクリック イベントを登録すると、1 つはキャプチャ段階にあり、もう 1 つはバブリング段階にあります。つまり、addEventListenter の 3 番目のパラメーターがそれぞれ false と true に設定されます。を実行してから、 の順序は何ですか。

<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;capture show&#39;);
 },true);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;bubble show&#39;);
 },false);
</script>

この場合、最初にやるべきことはキャプチャショーで、次にバブルショーです。ただし、この結果は登録の順序に関係します。最初に登録したものが最初に実行されます。イベント キャプチャとイベント バブリングの図を見ているため、最終的には特定の DOM オブジェクトが 1 つだけであることがわかります。

それでは、アウターとインナーの両方にクリックイベントを登録して、アウターは実行したくない場合はどうなるでしょうか？このとき、stopPropagation 関数を使用する必要があります。この関数はバブリングを防止するために使用され、同じ種類のイベントを登録する DOM オブジェクトが実行されないようにすることを意味します。

たとえば、カスタム ドロップダウン ボックスを作成する場合、ブラウザ内の他の場所をクリックし、ドロップダウン ボックスのオプションを非表示にする必要があります。この場合、stopPropagation を使用する必要があります。以下の通り:

<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(event){
  alert(&#39;inner show&#39;);
  event.stopPropagation();
 },false);
 clickouter.addEventListener(&#39;click&#39;,function(){
  alert(&#39;outer show&#39;);
 },false);
</script>

　　正常的情况下，我们在不添加stopPropagation函数时，首先应该执行inner，然后执行outer，但是当我们在inner的事件函数中添加了stopPropagation函数之后，执行完inner的事件函数之后，就不会在执行outer的事件函数了，也可以理解为事件冒泡到inner之后就消失了，因此也就不会在执行接下来的事件函数了。

　　由于事件捕获阶段没有可以阻止事件的函数，所以一般都是设置为事件冒泡。

相关推荐：

JavaScript实现为事件句柄绑定监听函数实例详解

JavaScript文件的同步和异步加载的实现代码

JavaScript 完成注册页面表单校验的实例

以上がJavaScript のイベント モデルをすばやく理解するのに役立ちますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。