jquery_jquery の一般的なイベントのバインド、ホバー、トグル、およびその他の例の紹介

1.$(document).ready()

$(document).ready() は、JavaScript の組み込み onload イベントに応答してタスクを実行する jQuery の一般的な方法です。 onload と同様の効果があります。ただし、いくつかの違いがあります:

ドキュメントがブラウザに完全にダウンロードされると、window.onload イベントがトリガーされます。 $(document).ready() を使用して登録されたイベント ハンドラーは、HTML がダウンロードされて Dom ツリーに解析された後にコードを実行しますが、関連するすべてのファイルがダウンロードされたことを意味するわけではありません。

通常、ページには onload イベント ハンドラーが 1 つだけあり、一度に保存できる関数は 1 つだけですが、$(document).ready() には複数の関数を含めることができます。

一般に、$(document).ready() は onload イベント ハンドラーを使用するよりも優れています。ただし、関連付けられたファイルがロードされていない場合は、画像の高さや幅などの属性を呼び出す際に問題が発生するため、さまざまなタイミングで適切な方法を選択する必要があります。

$(document).ready() には 3 つの書き方があります。つまり、

$(document).ready(function(){ 

//thisis the coding... 

});


$().ready(function(){ 

//thisis the coding... 

});


$(function(){ 

//thisis the coding... 

});

2. イベントバインディング

文法

$(セレクター).bind(イベント,データ,関数)

パラメータと説明:

イベント: 必須。要素に追加する 1 つ以上のイベントを指定します。スペースで区切られた複数のイベント。有効なイベントである必要があります。

データはオプションです。関数に渡す追加データを指定します。

関数が必要です。イベントの発生時に実行する関数を指定します。

対応するものは unbind():remove event です

例: $(‘#idchoose’).unbind(“click”,Function_Name)

略語結合イベント: 通常は略語を優先します

$("#dividelement").bind("click",function(){//do something})改写为：

$("#dividelement").click(function(){//do something }

jQuery は、.bind() メソッドを使用してイベントを要素にバインドし、.unbind() メソッドを使用して要素のバインドを解除します。さらに、.bind() メソッドは複数のバインドを実行できます。バインドがない場合は、バインドを解除するときに安全です。

多くの場合、イベントは 1 回トリガーするだけで済み、その後すぐにバインドを解除する必要があります。従来のアプローチによれば、最初にイベントをバインドし、イベントの実行後にバインドを解除することがあります。 jQuery は、上記のシナリオでの面倒なコード記述を具体的に解決するための短縮形のメソッドを提供します。例は次のとおりです。

$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher);

});

ところで、バインドを使用してイベントをバインドする利点は、カスタム イベントを定義して、一度に複数のイベントをバインドできることです。

3. 合成イベント

イベントをキャプチャする場合、多くの場合、結合されたユーザー操作をキャプチャし、複数の関数で応答する必要があります。これらのイベントは複合イベントと呼ばれます。

jQuery が提供する .ready() メソッドは、最も一般的に使用されるイベント メソッドの 1 つです。さらに、対話型処理に使用される関数が 2 つあります。

.hover(enter,leave) ホバー イベント (マウスがオブジェクトの上を移動したり、オブジェクトの外に移動したりする) をシミュレートするメソッド。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。

$(function(){

$("#panelh5.head").hover(function(){

$(this).next().show();

},function(){

$(this).next().hide(); 

})

})

.toggle(fn1,fn2,..fnN) クリックするたびに呼び出される関数を切り替えます。連続的なマウス クリック イベントをシミュレートするために使用されます。例:

$(function(){

$("#panelh5.head").toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

4. イベントオブジェクトとイベントバブリング

イベント オブジェクト: プログラム内でイベント オブジェクトを使用するのは非常に簡単です。たとえば、

のように関数にパラメータを追加するだけです。

$(“element”).click(function(event){

//event:事件对象

})

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

イベントキャプチャ: 複数の要素がイベントに応答できるようにする戦略。イベント キャプチャ プロセス中、イベントは最初に最も外側の要素に渡され、次により特定の要素に渡されます。 (body->div->span)

イベント バブリング: もう 1 つの逆の戦略は、タイム バブリングと呼ばれます。イベントが発生すると、この要素が応答する機会を取得した後、イベントがより一般的な要素に送信されます。イベントのバブリングには副作用があり、予期しない動作が発生する場合があります。 (スパン->ディビジョン->ボディ)

イベントのバブリングを防ぐ 3 つの方法

.preventDefault() メソッドを呼び出すことで、デフォルトのアクションが開始される前にイベントを終了できます。

event.stopPropagation() を呼び出してイベントの伝播を停止します

jQuery は、イベントのバブリングを完全に防止できる .stopPropagation() メソッドを提供します。

5.event.tatget 属性を使用してイベント オブジェクト

を明確にします。 イベント ハンドラー内のイベントはイベント オブジェクトを保存します。 event.tatget 属性には、イベントが発生したターゲット要素が格納されます。この属性は DOMAPI で指定されていますが、すべてのブラウザで実装されているわけではありません。 jQuery は、このプロパティをどのブラウザでも使用できるように、このイベント オブジェクトに必要な拡張を作成します。 .target を通じて、最初にイベントを受信した DOM 内の要素を特定できます。さらに、これはイベントを処理する DOM 要素を参照していることがわかります。

event.tatget 属性を使用してイベント オブジェクトをクリアし、イベントのバブリングを防ぎます。コードは次のとおりです。

その他のイベント オブジェクトの属性については、w3c の概要を参照してください。