jQueryのイベント処理の特徴（イベント名の仕組み）について-jsチュートリアル-php.cn

この記事では、jquery イベント処理のいくつかの機能と、jquery イベントの名前付けメカニズムの関連知識を主に紹介します。興味のある方は、ぜひ一緒にご覧ください。

bind() JQuery unbind() の () は、イベントバインディングとキャンセルのメカニズムを提供します。これにより、デフォルトで HTML でサポートされるイベントとカスタムイベントをバインドできます。 JQuery はカスタムイベントをサポートしているため、プログラミングに大きな柔軟性がもたらされます。 jquery イベント処理のいくつかの機能を一緒に学びましょう。

1. JQuery のイベントは繰り返しバインドでき、上書きされません。

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

ログイン後にコピー

button1 をクリックすると、これら 2 つのイベントハンドラーがトリガーされます。おそらく、上記のバインディングは、異なるメモリ空間を占有する異なる匿名関数であると言うかもしれません。確かにそうなのですが、たとえ同じ処理関数であっても、重複バインディングの問題は依然として存在します。 button1 をクリックすると、次のイベントハンドラー関数も 2 回呼び出されます。

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

ログイン後にコピー

ほとんどのシナリオでは、イベント処理関数は 1 回バインドするだけで済みます。そのため、イベントが複数回実行される場合は、バグがなくても、JQuery イベントの繰り返しバインド機能に注意する必要があります。結局のところ良い練習です。

2.bind を使用して、複数のイベントと処理関数を一度にバインドします。

複数のイベントが同じハンドラー関数を登録する必要がある場合は、次のコードを使用して簡素化できます (イベント名はスペースで区切られています):

$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});

ログイン後にコピー

各イベントのハンドラー関数が異なる場合は、次のメソッドを使用できます(json object ):

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

ログイン後にコピー

3. イベントオブジェクトとカスタムパラメーターを渡します。

一般的に言えば、jquery を使用する場合、イベントオブジェクトが必要になることはほとんどなく、カスタムパラメーターをイベント処理関数に渡す必要はありません。しかし、本当にこれを行う必要がある場合、JQuery もそれをサポートしています。

$("#button1").bind("click", {name:"aty"}, function(eventObject){ 
alert("params=" + eventObject.data.name); 
});

ログイン後にコピー

eventObject は IE や FF のイベントオブジェクトに非常に似ており、イベントが発生したときにより詳細な情報を取得できます。カスタムパラメーターを指定すると、JQuery はそれをイベントオブジェクトの data 属性に置きます。つまり、eventObject.data を通じて渡したパラメーター値を取得できます。

4. イベント中止の3つの形態。

unbind は、bind でバインドされたイベント処理関数をキャンセルするために使用されます。一般的に、すべてのイベントをキャンセルする、特定の種類のイベントをキャンセルする、特定の種類のイベント処理関数をキャンセルする、の 3 つの形式があります。

クリック、マウスアップ、マウスダウンのイベントを button1 にバインドし、クリックイベントが 2 つの処理関数にバインドされているとします。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

ログイン後にコピー

$("#button1").unbind(): button1 にバインドされているすべてのイベントハンドラーをキャンセルします。

$("#button1").unbind("click"): button1 にバインドされているクリックタイプのイベントハンドラーのみをキャンセルします。

これら 2 つの形式は理解しやすく、日常のプログラミングで最も一般的に使用される方法でもあります。上記のコードでは、2 つのクリックイベント処理関数を登録しましたが、2 番目のクリックイベント処理関数をキャンセルして、最初のクリックイベント処理関数を保持したい場合はどうすればよいでしょうか。匿名関数を登録しているため、それを実装する方法はありません。以下のコードは間違っており、期待した結果が得られません。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

ログイン後にコピー

バインドとアンバインドは同じ匿名関数を使用しますが、これら 2 つの関数は異なるメモリ空間を占有するため、同じ JavaScript オブジェクトではありません。賢い人なら、「バインドとアンバインドが異なる関数を使用した場合、目的は達成できるだろうか?」と考えたかもしれません。これは実際に当てはまります。以下のコードは正しいです。

$("#button1").bind("click",func1); 
$("#button1").bind("click",func2); 
// try to cancel function2
$("#button1").unbind("click",func2); 
function func1()
{
console.log("click1"); 
}
function func2()
{
console.log("click2"); 
}

ログイン後にコピー

これは unbind を使用する 3 番目の形式です。このアプローチでは匿名関数の使用が許可されておらず、グローバル関数を公開する必要があるため (少なくともそれが必要です)、このアプローチは非常に不適切であることがわかります。バインドを解除すると表示されます。を参照してください。 JQuery はイベント名前空間メカニズムを提供しており、個人的にはこの問題を解決するように設計されていると感じています。

5. イベント名前空間。

上で述べたように、イベント名前空間は、バインド解除の 3 番目の形式で発生する問題を解決するためのものです。以下は、JQuery 公式 API ドキュメントからの説明です:

バインドを解除するためにハンドラーへの参照を維持する代わりに、イベントに名前空間を設定し、この機能を使用してバインド解除アクションの範囲を狭めることができます。

そのため-イベント名前空間と呼ばれます。実際には、「click.a」などのイベントを参照するために、イベントタイプの後にドット構文でエイリアスを追加します。ここで、「a」は現在のイベントタイプ click のエイリアスです。つまり、イベントの名前空間です。ドットは名前空間の定義に使用されるため、カスタムイベントを使用する場合は、イベント名にドットを含めてはいけません。そうしないと、予期しない問題が発生します。特殊文字を使用できない場合は、この種の問題を試す必要はありません。使用しないと問題が発生します。

$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
// success to cancel function2
$("#button1").unbind("click.a");

ログイン後にコピー

ご覧のとおり、名前空間を使用すると、よりエレガントな方法で特定のイベントタイプのイベント処理関数をキャンセルできます。ここで言及しておく価値があるのは、名前空間の使用はアンバインドと競合せず、上記の 3 つの形式のアンバインドは通常どおり使用できることです。 $("#button1").unbind() は button1 のすべてのイベントをキャンセルでき、$("#button1").unbind("click") は引き続きすべてのクリックイベントをキャンセルできます。この互換性のあるデザインは素晴らしいです。

使用命名空间还要1个好处：能够按照命名空间来取消事件。

// 2个命名空间a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

ログイン後にコピー

这段代码我们使用2个命名空间a和b，如果我只想要保留第2个click事件处理函数，其余的全部删除。我们可以有2种方式达到目的：

方式1：

$("#button1").unbind("click.a");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");

ログイン後にコピー

方式2：

$("#button1").unbind(".a");

ログイン後にコピー

很显然方式2更加简单，更加技巧性，虽然代码更不容易看懂，不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码，只有2种情况：要么别人不行，代码写的烂；要么自己不行，知识懂的少。如果不熟悉某种语言，又怎能用它写好代码呢？所以，代码质量、开发效率，和个人技能水平，团队水平紧密相关。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！