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() は
> $(document).ready(function() {
//これはコーディングです...
>$(); .ready(function( ) {
//これはコーディングです...
});
>$(function() {
//これはコーディングです...
});

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( ; オブジェクト。 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 は、上記のシナリオでの面倒なコード記述を具体的に解決するための短縮メソッド 1 を提供します。例は次のとおりです:

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


$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher); } );
5. 複合イベント
イベントをキャプチャする場合、多くの場合、結合されたユーザー操作をキャプチャし、複数の関数で応答する必要があります。
jQuery が提供する .read() メソッドは、最も一般的に使用されるイベント準拠のメソッドの 1 つです。さらに、対話型処理に使用される関数が 2 つあります。
.hover(over,out) をシミュレートするメソッド。 hover イベント (マウスがオブジェクトの上を移動したり、オブジェクトの外に移動したりする)。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。
.toggle(fn,fn)はクリックするたびに呼び出される関数を切り替えます。