jQuery_jquery의 바인딩된 이벤트 네임스페이스에 대한 자세한 설명

이 글을 읽기 전에는 바인드에도 네임스페이스가 있을 수 있다는 사실을 전혀 몰랐습니다. 사실 이 글을 읽고 나서 매뉴얼을 다시 살펴보니 몇 가지 주의사항을 발견했습니다. 하지만 매뉴얼은 단 한 문장으로 모든 것을 다 설명해줍니다. 너무 자세히 설명하지 않고 네임스페이스가 매우 간단하고 더 이상 설명할 필요가 없다고 생각할 수도 있습니까?

바인드 메소드에는 세 개의 매개변수(type, [data], fn)가 있으므로 매뉴얼에서는 다음과 같이 소개합니다.

.bind() 메소드를 사용하여 추가합니다. 문서의 기본 동작 모드로 이동합니다. 포커스, 마우스오버, 크기 조정과 같은 모든 JavaScript 이벤트 개체는 유형 매개변수로 전달될 수 있습니다.

jQuery는 .bind('click')를 단순화하기 위해 .click()과 같은 표준 이벤트 유형을 바인딩하는 몇 가지 간단한 방법도 제공합니다. 총 다음이 있습니다: 흐림, 초점, focusin, focusout, 로드, 크기 조정, 스크롤, 언로드, 클릭, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 변경, 선택, 제출, keydown, 키누름, 키업, 오류.

type 매개변수로 사용되는 모든 문자열은 유효합니다. 문자열이 기본 JavaScript 이벤트 이름이 아닌 경우 이벤트 핸들러는 사용자 정의 이벤트에 바인딩됩니다. 이러한 사용자 정의 이벤트는 브라우저에 의해 트리거되지 않지만 .trigger() 또는 .triggerHandler()를 사용하여 다른 코드에서 수동으로 트리거될 수 있습니다.

type 매개변수의 문자열에 점(.) 문자가 포함되어 있으면 이 이벤트는 네임스페이스가 있는 것으로 간주됩니다. 이 점 문자는 이벤트를 네임스페이스에서 분리하는 데 사용됩니다. 예를 들어 .bind('click.name', handler) 가 실행되면 문자열의 click은 이벤트 유형이고 문자열의 name은 네임스페이스입니다. 네임스페이스를 사용하면 다른 이벤트를 트리거하지 않고도 특정 유형의 이벤트를 바인딩 해제하거나 트리거할 수 있습니다. 자세한 내용은 unbind()를 참조하세요.

이벤트가 요소에 전달되면 해당 이벤트에 대해 해당 요소에 바인딩된 모든 핸들러가 트리거됩니다. 여러 이벤트 핸들러가 등록되면 항상 바인딩된 순서대로 트리거됩니다. 모든 바인딩된 이벤트 처리 함수가 실행된 후 이벤트는 일반적인 이벤트 버블링 경로를 따라 계속해서 증가합니다.
그러나 다음과 같은 상황을 가정해 보십시오. 사용자 상호 작용 결과에 따라 런타임에 다양한 클릭 이벤트 처리 로직을 바인딩해야 하므로 이론적으로 특정 이벤트는 셀 수 없이 바인딩/바인딩 해제 작업을 수행하게 됩니다. 하지만 바인드 해제 시 다른 곳에서 사용할 수 있는 동일한 이벤트에 대한 모든 추가 바인딩 로직 대신 나 자신과 연결된 처리 로직만 해제되기를 바랍니다.

이때 .click() / .bind('click') + .unbind('click')을 직접 사용하여 반복 바인딩을 수행하면 바인딩된 모든 요소의 바인딩이 해제됩니다. 이 요소에 대한 잠재적인 영향은 이 요소에 대한 다른 제3자의 행동에 영향을 미칠 수 있습니다. 물론 바인딩 중에 함수 변수가 명시적으로 정의된 경우 바인딩 해제 중에 함수를 두 번째 매개변수로 제공하여 바인딩 해제할 처리 로직 중 하나만 지정할 수 있습니다. 그러나 실제 애플리케이션에서는 다양한 익명 함수 바인딩이 발생할 가능성이 높습니다. .결정된 상황.

이 문제에 대한 jQuery의 해결책은 이벤트 바인딩 네임스페이스를 사용하는 것입니다. 즉, 이벤트 이름 뒤에 .something을 추가하여 동작의 이 부분에 대한 논리적 범위를 구분합니다.

예를 들어 .bind('click.myCustomRoutine',function(){...})를 사용하여 익명 함수를 클릭 이벤트에 바인딩할 수도 있습니다(자신만의 네임스페이스를 사용하여 다양한 시간을 바인딩할 수 있음). 여러 번 동작 방법), 바인딩을 해제할 때 .bind('click.myCustomRoutine')를 사용하여 .bind('click') 또는 다른 방법을 통해 다른 클릭 이벤트를 해제하지 않고 .myCustomRoutine 네임스페이스에 바인딩된 모든 클릭 이벤트를 해제합니다. 네임스페이스에.

동시에 명령 공간을 사용하면 .unbind('.myCustomRoutine')를 통해 이 네임스페이스 아래의 모든 사용자 정의 이벤트 바인딩을 한 번에 바인딩 해제할 수도 있습니다.

jQuery의 네임스페이스는 다단계 공간을 지원하지 않는다는 점에 유의해야 합니다. 왜냐하면 jQuery에서 .unbind('click.myCustomRoutine.myCustomSubone')를 사용하면 네임스페이스가 myCustomRoutine 및 myCustomSubone인 두 병렬 네임스페이스 아래의 모든 클릭 이벤트가 차단 해제되지만 "myCustomRoutine" 아래의 myCustomSubone 하위 공간은 차단 해제되기 때문입니다.

jQuery의 바인드/바인드 해제 방법은 사용하기가 매우 간단하다고 해야 하며 대부분의 경우 사용되지 않을 수 있습니다. 대신 클릭/키다운 조작과 같은 이벤트 이름 스타일 방법을 사용하여 이벤트 바인딩을 직접 수행합니다.

그러나 다음과 같은 상황을 가정해 보겠습니다. 사용자 상호 작용 결과에 따라 런타임에 다양한 클릭 이벤트 처리 로직을 바인딩해야 하므로 이론적으로 바인딩/바인딩 해제 작업은 특정 이벤트에 대해 수없이 수행됩니다. 하지만 바인드 해제 시 다른 곳에서 사용할 수 있는 동일한 이벤트에 대한 모든 추가 바인딩 로직 대신 나 자신과 연결된 처리 로직만 해제되기를 바랍니다.

이때 .click() / .bind('click') + .unbind('click')을 직접 사용하여 반복 바인딩을 수행하면 바인딩된 모든 요소의 바인딩이 해제됩니다. 이 요소에 대한 잠재적인 영향은 이 요소에 대한 다른 제3자의 행동에 영향을 미칠 수 있습니다. 물론 바인딩 중에 함수 변수가 명시적으로 정의된 경우 바인딩 해제 중에 함수를 두 번째 매개변수로 제공하여 바인딩 해제할 처리 로직 중 하나만 지정할 수 있습니다. 그러나 실제 애플리케이션에서는 다양한 익명 함수 바인딩이 발생할 가능성이 높습니다. .결정된 상황.

이 문제에 대한 jQuery의 해결책은 이벤트 바인딩 네임스페이스를 사용하는 것입니다. 즉, 이벤트 이름 뒤에 .something을 추가하여 동작의 이 부분에 대한 논리적 범위를 구분합니다.

예를 들어 .bind('click.myCustomRoutine',function(){...})를 사용하여 익명 함수를 클릭 이벤트에 바인딩할 수도 있습니다(자신만의 네임스페이스를 사용하여 다양한 시간을 바인딩할 수 있음). 여러 번 동작 방법), 바인딩을 해제할 때 .bind('click.myCustomRoutine')를 사용하여 .bind('click') 또는 다른 방법을 통해 다른 클릭 이벤트를 해제하지 않고 .myCustomRoutine 네임스페이스에 바인딩된 모든 클릭 이벤트를 해제합니다. 네임스페이스에.

동시에 명령 공간을 사용하면 .unbind('.myCustomRoutine')를 통해 이 네임스페이스 아래의 모든 사용자 정의 이벤트 바인딩을 한 번에 바인딩 해제할 수도 있습니다.

jQuery의 네임스페이스는 다단계 공간을 지원하지 않는다는 점에 유의해야 합니다. 왜냐하면 jQuery에서 .unbind('click.myCustomRoutine.myCustomSubone')를 사용하면 네임스페이스가 myCustomRoutine 및 myCustomSubone인 두 병렬 네임스페이스 아래의 모든 클릭 이벤트가 차단 해제되지만 "myCustomRoutine" 아래의 myCustomSubone 하위 공간은 차단 해제되기 때문입니다.