JQuery_jquery での DOM イベントバブリング例の分析-jsチュートリアル-php.cn

この記事では、例を通じて 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 プログラミングに役立つことを願っています。