JQuery_jquery での DOM イベント バブリング例の分析

この記事では、例を通じて JQuery での DOM イベントのバブリングを分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

バブリングとは

ページ上には複数のイベントが存在することがあり、複数の要素が同じイベントに応答することができます。 Web ページに 2 つの要素があり、1 つの要素がもう 1 つの要素内にネストされており、両方ともクリック イベントにバインドされているとします。同時に、クリック イベントも body 要素にバインドされています。

<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>

<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

内部のspan要素がクリックされた場合、つまりspan要素のクリックイベントがトリガーされた場合、3件のレコードが出力されます。内側のspan要素をクリックするだけで、外側のdiv要素とbody要素にバインドされたクリックイベントがトリガーされます。これはイベントのバブリングが原因で発生します。 scan 要素をクリックするときに、span 要素を含む要素 div と div 要素を含む要素 body もクリックすると、各要素は特定の順序でクリック イベントに応答します。

要素のクリック イベントは、次の順序で「バブル」します。

1.
2.

3.

バブリングと呼ばれる理由は、DOM の階層に従ってイベントがバブルのように上に上昇し続けるためです。

イベントのバブリングによって引き起こされる問題

イベントのバブリングは予期しない影響を引き起こす可能性があります。上記の例では、当初は 要素のクリック イベントのみをトリガーする必要がありましたが、

要素と 要素のクリック イベントも同時にトリガーされました。したがって、イベントの範囲を制限する必要があります。 要素がクリックされると、 要素のクリック イベントのみがトリガーされます。要素がクリックされると、

要素のクリック イベントのみがトリガーされます。 要素はトリガーされません。

イベントオブジェクト

IE-DOM と標準 DOM ではイベント オブジェクトの実装方法が異なるため、異なるブラウザーでイベント オブジェクトを取得することはより困難になります。この問題に対処するために、JQuery は必要な拡張機能とカプセル化を作成し、どのブラウザーでもイベント オブジェクトとイベント オブジェクトの一部のプロパティを簡単に取得できるようにしました。

プログラムでイベント オブジェクトを使用するのは非常に簡単です。jQuery コードは次のとおりです。

$("element").bind("click",function(event){ 
  //event : 事件对象 
  //... 
});

このように、「element」要素をクリックするとイベントオブジェクトが作成されます。このイベント オブジェクトには、イベント処理関数によってのみアクセスできます。イベント処理関数の実行後、イベント オブジェクトは破棄されます。

イベントのバブリングを停止

イベントのバブリングを停止すると、イベント内の他のオブジェクトのイベント ハンドラーが実行されなくなる可能性があります。イベントのバブリングを停止するために、JQuery には stopPropagation() メソッドが提供されています。

$(function(){
   // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "内层span元素被点击";
    $('#msg').html(txt);
    event.stopPropagation(); // 阻止事件冒泡
  });
})

要素をクリックすると、 要素のクリック イベントのみがトリガーされます。

要素のクリック イベントはトリガーされません。同じ方法を使用して、

要素のバブリング問題を解決できます。

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});

このように、要素または

要素をクリックすると、対応するコンテンツのみが出力され、他のコンテンツは出力されません。

デフォルトの動作をブロック

Web ページ内の要素には独自のデフォルト動作があります。たとえば、ハイパーリンクをクリックするとジャンプし、「送信」ボタンをクリックするとフォームが送信されます。場合によっては、要素のデフォルト動作を防止する必要があります。

JQuery では、要素のデフォルト動作を防止するために、preventDefault() メソッドが提供されています。

たとえば、プロジェクトでは、「送信」ボタンをクリックすると、要素が必須フィールドであるかどうか、要素の長さが 6 文字であるかどうかなど、フォームの内容を検証する必要があることがよくあります。 、など。フォームが送信条件が満たされた場合にフォームの送信を禁止しない場合 (デフォルトの動作)。

<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

ユーザー名が空の場合に「送信」ボタンをクリックすると、プロンプトが表示され、フォームを送信できません。フォームはユーザー名を入力した後にのみ送信できます。 PreventDefault() メソッドがフォームの送信を阻止できることがわかります。

イベント オブジェクトのバブリングとデフォルトの動作を同時に停止したい場合は、イベント処理関数で false を返すことができます。これは、イベント オブジェクトの stopPapagation() メソッドとPreventDefault() メソッドの両方を呼び出す簡略的な方法です。

フォームの例では、event.preventDefault() は次のように書き換えることができます: return false;

イベント バブリングの例で、event.stopPropaqation(); を return false;

のように書き換えることもできます。

イベントキャプチャ

イベント キャプチャとイベント バブリングは 2 つの相反するプロセスです。イベント キャプチャはトップダウンでトリガーされます。バブリング イベントの例として、要素のクリック イベントは次の順序でキャプチャされます。

1.
2.

3.

明らかに、イベントのキャプチャは最も外側の要素から始まり、次に最も内側の要素に向かって行われます。したがって、バインドされたクリック イベントは、最初に

要素に渡され、次に

要素に渡されます。

残念ながら、すべての主要なブラウザがイベント キャプチャをサポートしているわけではなく、この欠陥は JavaScript では修正できません。 JQuery はイベント キャプチャをサポートしていません。リーダーがイベント キャプチャを使用する必要がある場合は、ネイティブ JavaScript を直接使用してください。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。