jquery_jquery の一般的なイベントのバインド、ホバー、トグル、およびその他の例の紹介-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:41:24

オリジナル

1458 人が閲覧しました

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 の概要を参照してください。