ホームページ >ウェブフロントエンド >フロントエンドQ&A >イベントバインディングを削除する際のjquery
イベントバインディングを削除する際のjquery
- PHPzオリジナル
- 2023-05-28 17:38:38728ブラウズ
フロントエンド開発では、さまざまなインタラクティブな効果を実現するために、イベントをページ要素にバインドして、特定のシナリオで特定の操作を実行できるようにします。ただし、イベントのバインドを削除する必要がある場合があります。たとえば、要素が破棄された場合、またはイベントをリッスンする必要がなくなった場合、対応するイベント ハンドラーを要素からバインド解除する必要があります。 jQuery では、イベントのバインドとバインド解除を実装するために、on()、off()、unbind() wait などの複数のメソッドが提供されています。この記事では主に on() メソッドのイベントバインディングを削除する方法を紹介します。
jQuery イベント処理
jQuery には通常、bind()、delegate()、 という 3 つのイベント処理メソッドがあります。ライブ（）＃＃＃。このうち、delegate() はほとんど使用されず、動的に追加される子要素に対して親要素のイベント ハンドラを追加するのが主な機能であり、live() は jQuery1.7 で非推奨となりました。バージョン 1 以降は on() で置き換えることができます。
on() は、jQuery で一般的に使用されるイベント処理メソッドであり、1 つ以上のイベント処理関数を指定された要素にバインドするために使用されます。一般的な使用方法は次のとおりです。
$(selector).on(event, handler);このうち、
selector はイベントにバインドする必要があるターゲット要素であり、ラベル、クラス名、ID などのセレクターが可能です。など; event これはクリック、マウスオーバー、キーアップなどのバインドされたイベント タイプです; handler はイベント処理関数であり、匿名関数または定義された関数名。
on() のパラメータを使用してイベントのバインドを削除する方法を紹介します。
off() メソッドを使用できます。このメソッドは、指定された要素に関連するイベント ハンドラー関数を削除するために使用されます。一般的な使用方法は次のとおりです。
$(selector).off(event, handler);このうち、
selector は削除する必要がある要素であり、ラベル、クラス名、ID などのセレクターが可能です。 ; event クリック、マウスオーバー、キーアップなど、削除する必要があるイベント タイプです。; handler は、削除するイベント処理関数です。匿名関数または定義された関数名。
off() メソッドを使用してイベント バインディングを削除する方法を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移除指定事件处理程序</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="btn">点击绑定事件</button>
<script>
function handleClick() {
console.log('处理click事件');
}
$('#btn').on('click', handleClick);
setTimeout(() => {
$('#btn').off('click', handleClick);
console.log('移除click事件处理程序');
}, 2000);
</script>
</body>
</html>上記のコードでは、ボタン要素に click イベントをバインドし、バインドされたイベント ハンドラーは handleClick です。次に、2 秒後、off() メソッドを使用して、クリック イベント ハンドラー handleClick を削除します。ボタンをクリックすると、イベントを処理する情報がコンソールに表示されます。ハンドラーを削除した後、ボタンを再度クリックしても何も起こりません。これは、off() メソッドを通じて指定されたイベント ハンドラーを削除する基本的な操作です。
別の形式の off を使用できます。 () メソッド:
$(selector).off(event);このメソッドは 1 つのパラメーター
event を渡すだけで済みます。これにより、指定されたタイプのすべてのイベント ハンドラーが要素から削除されます。
off() に加えて、jQuery にはイベント バインディングを削除するために使用できる別のメソッド one があります()。このメソッドは on() に非常に似ていますが、イベントを 1 回だけリッスンし、実行後に自動的にバインドを解除します。したがって、一度だけ実行する必要がある要素にイベント ハンドラーを追加する必要がある場合は、on() の代わりに one() を使用してイベントを手動でバインドできます。手動でバインドを解除する必要はありません。
$(selector).one(event, handler);
on() メソッドと同様に、one() も 2 つのパラメーターを受け取り、バインドされるイベント タイプとハンドラーを指定します。指定されたイベント タイプがトリガーされると、ハンドラーが実行されます。ハンドラーの実行が完了すると、対応するイベントは自動的に削除されます。
unbind() メソッドを使用して、イベント バインディングを削除することもできます。 off() と同様に、unbind() にも 2 つの使用法があります。1 つは、指定されたイベント ハンドラーを削除すること、もう 1 つはすべての種類のイベント ハンドラーを削除することです。使用方法は次のとおりです。
$(selector).unbind(event, handler); // 移除指定事件处理程序 $(selector).unbind(event); // 移除全部事件处理程序概要この記事では主に
on()、off()、 の使用方法を紹介します。 1 つは jQuery () メソッドと unbind() メソッドで、イベントのバインド操作とバインド解除操作を処理します。さまざまなニーズに応じて、イベント バインディングを処理する適切な方法を選択して、コードをより柔軟かつ効率的に行うことができます。バインドを解除するときは、パラメータの正しい受け渡しに注意する必要があることに注意してください。そうしないと、予期しない状況が発生する可能性があります。
以上がイベントバインディングを削除する際のjqueryの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。