jQueryのいくつかの一般的なイベント関数の使用例のまとめ

1.$(document).ready()

$(document).ready() は、jQuery で

JavaScript 組み込みの onload イベントに応答し、タスクを実行する一般的な方法です。 onload と同様の効果があります。ただし、いくつかの違いがあります: ドキュメントがブラウザに完全にダウンロードされると、window.onload イベントがトリガーされます。 $(document).ready() を使用して登録された
イベント ハンドラー プログラムは、HTML がダウンロードされ、Dom ツリーに解析された後に実行できるようになりますが、関連するすべてのファイルがダウンロードされたことを意味するわけではありません。 通常、ページには onload イベント ハンドラーが 1 つだけあり、一度に 1 つの関数への
reference しか保存できませんが、$(document).ready() は複数を持つことができます。 一般的に言えば、$(document).ready() は onload イベント ハンドラーを使用するよりも優れています。ただし、関連ファイルがロードされていない場合は、画像の高さや幅などの
属性 を呼び出すときに問題が発生するため、さまざまなタイミングで適切なメソッドを選択する必要があります。

$(document).ready()有三种写法，分别是： 
> $(document).ready(function() { 
//this is the coding... 
}); 
>$().ready(function() { 
//this is the coding... 
}); 
>$(function() { 
//this is the coding... 
});

2. イベントキャプチャとイベントバブリング イベントキャプチャ: 複数の要素がイベントに応答できるようにする戦略。イベント キャプチャ プロセス中、イベントは最初に最も外側の要素に渡され、次により特定の要素に渡されます。
イベント バブリング: もう 1 つの逆の戦略はタイム バブリングと呼ばれ、イベントが発生すると、最初に最も具体的な要素に送信され、この要素が応答する機会を得た後、イベントはより一般的な要素にバブリングされます。イベントのバブリングには副作用があり、予期しない動作が発生する場合があります。

3. イベントのバブリングを防ぐ 3 つの方法 デフォルトのアクションを指定する
.preventDefault() メソッドを呼び出すことで、デフォルトのアクションが開始される前にイベントを終了できます。
event.stopPropagation() を呼び出してイベントの伝播を停止します
jQuery は、イベントのバブリングを完全に防ぐことができる .stopPropagation() メソッドを提供します。コード例は次のとおりです。
stopPropagation() メソッドを使用してイベントのバブリングを防止します

$(document).ready(function() { 
$('switcher').click(function(event){ 
if(this.id == 'switcher-narrow'){ 
$('body').addClass('narrow'); 
} 
else if(this.id == 'switcher-large'){ 
$('body').addClass('large'); 
} 
$('switcher .button').romoveClass('selected'); 
$(this).addClass('selected'); 
event.stopPropagation(); 
};) 
});

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

$(document).ready(function() { 
$('switcher').click(function(event){ 
if(event.target == this) 
{ 
$('switcher .button').toggleClass('hidden'); 
} 
};) 
});

4. よく使用されるイベント バインディング jQuery は .bind() メソッドを使用してイベントを要素にバインドします。 、 .unbind( ) メソッドを使用して要素のバインドを解除します。さらに、.bind() メソッドは複数のバインドを実行できます。バインドがない場合は、バインドを解除するときに安全です。
多くの場合、イベントは 1 回トリガーするだけですぐにバインド解除されます。従来のアプローチによれば、最初にイベントをバインドし、イベントの実行後にバインドを解除することがあります。 jQuery は、上記のシナリオでの面倒なコード記述を具体的に解決するための短縮メソッドを提供します。例は次のとおりです。

$(document).ready(function(){ 
$('#swotcjer').one('click',toggleStyleSwitcher); 
});

5. 複合イベント
イベントをキャプチャする場合、多くの場合、結合されたユーザーの操作をキャプチャする必要があります。 、およびそれに応答する複数の関数、これらのイベントは複合イベントと呼ばれます。 jQuery によって提供される .read() メソッドは、最も一般的に使用されるイベント メソッドの 1 つです。さらに、対話型処理に使用される関数が 2 つあります。
.hover(over,out) 1 つは、イベントのホバーリング メソッドを模倣します (マウスが上に移動します)。オブジェクトから移動します)。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。
.toggle(fn,fn) クリックするたびに呼び出される関数を切り替えます。

以上がjQueryのいくつかの一般的なイベント関数の使用例のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。