jQuery 이벤트 네임스페이스에 대한 자세한 설명

jquery를 사용하면 event리스너 바인딩 및 바인딩 해제가 매우 간단해집니다. 하지만 요소의 이벤트에 바인딩된 여러 리스너가 있는 경우 리스너 중 하나를 정확히 어떻게 바인딩 해제합니까? 이벤트의 네임스페이스를 이해해야 합니다.

다음 코드를 보세요:

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

위와 같이 이벤트 리스너를 바인딩합니다. 요소를 클릭하면 doSomething 및 doSomethingElse 리스너가 모두 트리거됩니다. 이는 jQuery를 사용하면 편리하며, 언제든지 요소의 동일한 이벤트에 다른 리스너를 추가할 수 있습니다.

onclick 사용과 달리 새 리스너는 이전 리스너를 덮어씁니다.

doSomething과 같은 리스너 중 하나의 바인딩을 해제하려면 어떻게 해야 하나요?

그런가요?

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

주의! 위의 코드 줄은 요소의 클릭 이벤트에 대한 모든 리스너를 바인딩 해제하지만 이는 우리가 원하는 결과가 아닙니다.

다행히도 jQuery의 .off() 메서드는 .on() 처럼 두 번째 매개변수를 받아들일 수 있습니다. 리스너

함수 의 이름이 .off() 메소드에 두 번째 매개변수로 전달되면 지정된 리스너의 바인딩이 해제될 수 있습니다.

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

하지만 이 함수의 이름을 모르거나

익명 함수를 사용하는 경우:

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

클릭 이벤트 리스너를 정확하게 바인딩 해제할 수 있는 방법은 무엇인가요? 이제 jQuery의 이벤트 네임스페이스에 대해 알아볼 시간입니다!

먼저 코드:

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

여기에서는 클릭 이벤트를 .on() 메서드에 매개변수로 전달하는 것이 아니라 클릭 이벤트에 대한 네임스페이스를 지정한 다음 이 네임스페이스에서 클릭 이벤트를 모니터링합니다. 이 시점에서는 리스너가 익명 함수이더라도 실제로는 "이름이 지정"됩니다. 이제 다음과 같이 특정 네임스페이스에서 이벤트 리스너를 바인딩 해제할 수 있습니다.

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

이것은 jQuery가 제공하는 또 다른 편리하고 강력한 기능이며, 내부 구현은 확실히 흥미롭습니다!

위 내용은 jQuery 이벤트 네임스페이스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!