JQuery_jquery のイベントのバインド (bind()) とイベントの削除 (unbind())

イベントの実行後、イベントの効果をキャンセルしたい場合は、特定の方法で処理できる場合があります。たとえば、bind() (イベントのバインド) メソッドと unbind() (bind() メソッドによって追加されたイベントの削除) メソッドは、イベントの影響を削除するために使用されます。

たとえば、次のような場合:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数(){
$('#btn').bind("クリック", function(){
を通して }).bind("クリック", function(){
を通して }).bind("クリック", function(){
を通して });
})




html 部分:

コードをコピーします コードは次のとおりです:

クリックしてください

ボタン ボタンがクリックされると、3 つのクリック イベントがトリガーされ、ここでの append() メソッドは 3 つの段落のコンテンツを div レイヤーに渡します。

append() メソッドは、指定されたコンテンツを選択された要素の末尾に (まだ内部的に) 追加します。 html() メソッドとは依然として異なります。html() メソッドは、要素の末尾にコンテンツを追加するのではなく、要素全体のコンテンツを変更します。 text() メソッドは html() メソッドに似ていますが、異なる点は、html コードは html() メソッド内に記述でき、正しく解析できるのに対し、text() は html コードを通常のものとしてしか扱えないことです。弦。

ここをクリックするたびに、div レイヤーの最後に段落を追加するイベントが実行されます。次のコードはイベント効果をキャンセルします。イベントを削除してクリック効果を無効にすることができます。

コードをコピーします

コードは次のとおりです: <スクリプトタイプ="text/javascript"> $(関数(){

$('#btn').bind("クリック", function(){

を通して }).bind("クリック", function(){
を通して }).bind("クリック", function(){
を通して });
$('#delAll').click(function(){
$('#btn').unbind("click");
});
})

$('#btn').unbind("click"); このコードの機能は、要素 btn の下のクリック イベントをキャンセルすることです。これは、bind() メソッドだけでなく、click() メソッドにも有効です。ある観点から見ると、bind("click",function(){}) と click(function(){}) は同等です。

特定のメソッドの特定のイベントを削除することもできます。次のコードを参照できます:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数(){
$('#btn').bind("click", myFun1 = function(){
を通して }).bind("クリック", myFun2 = function(){
を通して }).bind("クリック", myFun3 = function(){
を通して });
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);
});
})




unbind() メソッドの 2 番目のパラメーターは、イベントに対応する実行関数の名前です。実行後、myFun2 イベントのみが削除され、他の 2 つのクリック イベントは通常どおり実行されます。

bind() メソッドに似たメソッド one() もありますが、one() メソッドは 1 回だけ実行される点が異なります。一致した各要素の特定のイベント (クリックなど) にワンタイム イベント ハンドラーをバインドします。コードは次のとおりです:

コードをコピーします コードは次のとおりです: <スクリプトタイプ="text/javascript">

$(関数(){

$('#btn').one("クリック", function(){
を通して }).one("クリック", function(){
を通して }).one("クリック", function(){
を通して });
})




クリック後に一度だけ実行されます。もう一度クリックしても効果は発動しません。これが一つの方法です。

上記がこの記事の全内容です。この記事が皆さんの jQuery のバインディング イベントと削除イベントの理解を深めるのに役立つことを願っています。