jQueryイベント名前空間の詳しい説明

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

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

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

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

onclick を使用するのとは異なり、新しいリスナーは古いリスナーを上書きします。

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

そうですか？

えー

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

幸いなことに、jQuery の .off() メソッドは、 .on() と同様に 2 番目のパラメーターを受け入れることができます。リスナー

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

$(“#element”).off(“click”);

しかし、この関数の名前がわからない場合、または

匿名関数を使用している場合:

$(“#element”).off(“click”, doSomething);

クリック イベント リスナーのバインドを正確に解除するにはどうすればよいでしょうか? jQuery のイベント名前空間について学びましょう。

最初のコード:

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

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

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

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

以上がjQueryイベント名前空間の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。