JQuery_jquery での DOM イベント バインディングの使用法の詳細な説明

この記事の例では、JQuery での DOM イベント バインディングの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ドキュメントが読み込まれた後、イベントを要素にバインドして特定の操作を完了する場合は、bind() メソッドを使用して、特定のイベントを一致する要素にバインドできます。bind() メソッドの呼び出し形式は次​​のとおりです。 🎜>

bind( type [, data] , fn);

bind() メソッドには 3 つのパラメータがあり、それらについては以下で説明します。

最初のパラメータは、ブラー、フォーカス、ロード、サイズ変更、スクロール、アンロード、クリック、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown などのイベント タイプです。 、キープレス、キーアップ、エラーなど、もちろん名前をカスタマイズすることもできます。

2 番目のパラメーターはオプションのパラメーターであり、event.data プロパティ値としてイベント オブジェクトに渡される追加のデータ オブジェクトです。
3 番目のパラメーターは、メートルにバインドされた処理関数です。

jQuery のイベント バインディング タイプには、通常の JavaScript イベント バインディング タイプよりも「on」が少ないことがわかります。たとえば、マウス クリック イベントは、jQuer の click イベント、JavaScript の onclick() 関数に対応します。

要件に従って、次の手順を完了する必要があります。

1. DOM がロードされるまで待ちます。

2. 「タイトル」が配置されている要素を見つけて、クリック イベントをバインドします。
3. 「content」要素を検索し、「content」要素を表示します。

$(function(){
 $("#panel h5.head").bind("click",function(){
   var $content = $(this).next();
   if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})

ready() メソッドと同様に、bind() メソッドも複数回呼び出すことができます。

上記の jQuery コードにはキーワード this があり、JavaScript と同じ機能を持ちます。これは、対応する動作を実行する DOM 要素を指します。この DOM 要素が jQuery のメソッドを使用できるようにするには、$(this) を使用してそれを jQuery オブジェクトに変換します。

要素が表示されているかどうかを判断するには、jQuery の is() メソッドを使用できます。コードでは、$(this).next("div.content") が複数回使用されていることが判明したため、ローカル変数 $content を定義できます。

上記の例では、要素にバインドされているイベント タイプは click です。ユーザーがクリックすると、バインドされたイベントがトリガーされ、イベントの関数コードが実行されます。次に、イベント タイプをマウスオーバーとマウスアウトに変更します。つまり、カーソルが上をスライドするとイベントがトリガーされます。以下の手順が必要です。

1. DOM がロードされるまで待ちます。

2. 「タイトル」が配置されている要素を見つけて、mouseover イベントをバインドします。
3. 「Content」要素を見つけて「Content」を表示します。
4. 「タイトル」が配置されている要素を見つけて、mouseout イベントをバインドします。
5. 「Content」要素を見つけて、「Content」を非表示にします。

コードの実行後、カーソルを「タイトル」リンク上にスライドさせると、対応する「コンテンツ」が表示されます。カーソルが「タイトル」リンクの外にスライドすると、対応する「コンテンツ」が非表示になります。

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

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

上記の例では、bind() メソッドを使用して、クリック イベント、マウスオーバー イベント、マウスアウト イベントをそれぞれ「タイトル」にバインドしています。バインディング メソッドは同じです。さらに、bind0 メソッドは他のすべての JavaScript イベントをバインドすることもできます。

クリック、マウスオーバー、マウスアウトなどのイベントは、プログラムでよく使用されます。jQuery には、このための一連の短縮メソッドも用意されています。省略メソッドは、bind() メソッドに似ており、同じ効果が得られます。唯一の違いは、コードの量を削減できることです。

たとえば、イベントをバインドするために略語を使用するように上記の例を書き直すと、コードは次のようになります:

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

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