jQuery events_jquery の名前空間の簡単な理解

jQuery を使用すると、イベント リスナーのバインドとバインド解除が非常に簡単になります。しかし、要素上のイベントに複数のリスナーがバインドされている場合、リスナーの 1 つを正確にバインド解除するにはどうすればよいでしょうか?イベントの名前空間を理解する必要があります。

以下のコードを見てください:

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

$('#element')
.on('click', doSomething)
.on('click', doSomethingElse);

次のようにイベント リスナーをバインドします上記では、要素をクリックすると、doSomething リスナーと doSomethingElse リスナーの両方がトリガーされます。これは jQuery を使用すると便利で、いつでも要素の同じイベントに異なるリスナーを追加できます。 onclick とは異なり、新しいリスナーは古いリスナーを上書きします。

doSomething などのリスナーの 1 つのバインドを解除したい場合、どうすればよいでしょうか?

そうですか？

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

$('#element').off ('クリック');

注意!上記のコード行は、要素のクリック イベントのすべてのリスナーのバインドを解除しますが、これは私たちが望む結果ではありません。

幸いなことに、jQuery の .off() メソッドは、 .on() と同様に 2 番目の引数を受け入れることができます。リスナー関数の名前が .off() メソッドに 2 番目のパラメーターとして渡されている限り、指定されたリスナーのバインドを解除できます。

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

$('#element').off ('click ', doSomething);

ただし、この関数の名前がわからない場合、または匿名関数を使用している場合:

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

$('#element').on('click', function() {
console.log('doSomething');

クリック イベント リスナーのバインドを正確に解除するにはどうすればよいですか?
まずコードを入力します:

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

$('#element ').on('click.myNamespace', function() {
console.log('doSomething');
});

これは違いますクリック イベントをパラメータとして .on() メソッドに渡しますが、クリック イベントの名前空間を指定し、この名前空間でクリック イベントをリッスンします。この時点では、リスナーが匿名関数であっても、実際には「名前付き」になります。これで、次のように特定の名前空間からイベント リスナーのバインドを解除できるようになります。

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

$('#element').off ('click .myNamespace');

これも jQuery が提供する便利で強力な機能であり、その内部実装は確かに興味深いものです。