jQueryバインディングイベントとは何ですか?

jquery では、イベントのバインドとは、通常のイベントを DOM ノードにバインドすることを意味します。DOM ノードが選択されているときに、イベントをそれにバインドして、ユーザーが対応する操作を提供しやすくします。jquery には、bind、live、jquery の 4 つのメソッドがあります。イベントをバインドするにはデリゲートと on を使用します。ライブ メソッドは削除されました。イベントをバインドするには on を使用することをお勧めします。

このチュートリアルの動作環境: Windows10 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。

jquery イベントのバインディングの意味は何ですか?

イベント バインディング: 通常のイベントを DOM ノードにバインドします。DOM ノードが選択されると、イベントはバインドされます。ユーザーが対応する操作を提供しやすくするため。

例: クリック マウス イベントをボタン ボタンにバインドし、focusin focus イベントを入力にバインドするなど。具体例: コード内に $('.bn1').click(function ( ){...}) は通常のイベント バインディングです。

拡張:

イベント委任: イベント バインディングに基づいてイベント バインディングを補完および拡張することを指します。具体的には、子ノード要素を介してイベントをバインドし、親要素の DOM ノード (祖先ノード) は、その子孫のすべての子要素を均一に管理します。

このようにして、多くのイベントにバインドする必要があるサブ要素に遭遇した場合、多くのトラブルを回避してイベントをバインドする作業を繰り返すことができ、アクセス効率が向上します。特定のコード $('.div').on('click','.bn2',function(){...})

jquery にはイベントをバインドする 4 つの方法があります。バインド、ライブ、デリゲート、オン。このうち、live が削除され、bind と delegate の最下層が実装されています。

jquery では、イベントをバインドするために on を使用することをお勧めします。ネイティブ イベントに加えて、jquery はカスタム イベントのバインディングをサポートします。

#最も一般的に使用されるメソッド

$("selector").イベント名 (匿名関数)

# # 例 1:

//这里的button为元素选择器，click为鼠标点击事件$("button").click(function(){
					//函数内容
				})

例 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
					//函数内容
				})

例 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
					//函数内容
				})

バインド関数

$( " セレクター").bind({"イベント名": 無名関数})

例 1:

//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
					//函数内容
				}})

例 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

例 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){
					//函数内容
				}})

Note

: ここでのバインド関数パラメータは、中括弧で囲まれたディクショナリであり、キー値は二重引用符で囲まれたイベント名、および値の値です。は関数 Content です。必ず確認してください形式に注意してください。

on function

2 つの仮パラメータ

$("selector").on( "イベント名"、匿名関数)

例:

$("button").on("click",function(){
					//函数内容
				})

Note

: 2 つの仮パラメータを持つ関数とバインドの使用方法機能は似ていますが、形式が異なるため、一緒に覚えることができます。

3 つの仮パラメータ

3 つのパラメータが含まれており、複数の子を持つ親ノードに非常に適しており、子ノードのイベントを均一に制御できます

$("親ノードセレクター").on("イベント名", "子ノード、つまりバインドされる要素", 無名関数)

例:

$("ul").on("click","li",function(){
					$(this).css("color","blue");    //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
 				})

注

: 3 つのパラメータを含む使用シナリオと、このキーワードの使用に注意してください

デリゲート関数

デリゲート関数には on 関数と似た 3 つの仮パラメータがありますが、パラメータの位置が異なる点が異なります。

$("親ノードセレクター").delegate("子ノード、つまりバインドされる要素", "イベント名", 無名関数)

$("ul").delegate("li","click",function(){
					$(this).css("color","blue");
				})

注

: ここでのパラメータの順序は、on 関数の順序とは異なることに注意してください。

概要

上記のバインディング イベントを見ると、さまざまなバインディング イベントによってキーワードと対応するパラメーター リストが変更されるだけであることがわかります。

• 内容これらすべてに共通するのは
$("selector") です。関数名 (パラメーター リスト)
• ; パラメーター リストの内容は、イベント名、匿名関数、または子ノード セレクター ## にすぎません。 #ここでの無名関数は、実際にはコード本体を格納するアドレスであり、パラメータがアドレスであることに相当しますが、コード量を減らすため、関数のアドレスを直接無名関数に置き換えています。

#テンプレート##最もよく使用される$("selector").イベント名 (匿名関数)bind function$("selector").bind({" イベント名": 匿名関数})on function$("セレクター").on("イベント名", 匿名関数)#$("親ノードセレクター").on("イベント名", "子ノード、つまりバインドされる要素", 無名関数)ビデオ チュートリアルの推奨:

delegate function	$("親ノードセレクター").delegate("子ノード、つまりバインドされる要素", "イベント名", 無名関数 )
	jQuery ビデオ チュートリアル

以上がjQueryバインディングイベントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。