jQuery events_jquery의 네임스페이스에 대한 간략한 이해

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

아래 코드를 보세요:

코드를 복사하세요 코드는 다음과 같습니다.

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

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

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

그런가요?

코드 복사 코드는 다음과 같습니다.

$('#element').off ('클릭');

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

다행히도 jQuery의 .off() 메서드는 .on() 처럼 두 번째 인수를 받아들일 수 있습니다. 리스너 함수의 이름이 .off() 메소드에 두 번째 매개변수로 전달되는 한, 지정된 리스너는 바인딩 해제될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$('#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가 제공하는 또 다른 편리하고 강력한 기능이며, 내부 구현은 확실히 흥미롭습니다!