jQueryイベント名前空間の詳しい説明-jsチュートリアル-php.cn

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

零下一度

リリース： 2017-06-17 15:36:05

オリジナル

923 人が閲覧しました

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 サイトの他の関連記事を参照してください。