페이지의 다른 곳을 클릭하여 div를 숨기는 jQuery의 Delegate_jquery 생각

가장 간단한 것부터 시작해 보겠습니다. 페이지에 ID가 test인 div가 있는 경우 페이지의 다른 곳을 클릭하여 div를 숨겨야 합니다.

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

                                                    
이 문제에 대해 일반적으로 생각하는 두 가지 방법이 있습니다. 둘 다 이벤트 버블링의 원리를 사용합니다. Javascript 이벤트 메커니즘에 대해 자세히 알아보려면

JavaScript 및 HTML 상호 작용을 살펴보세요. - 이벤트, 이번 글의 초점은 아니므로 이벤트 버블링에 대해 간단히 소개하겠습니다.

이벤트 버블링

IE의 이벤트 버블링: 이벤트는 처음에 가장 구체적인 요소에 의해 수신된 다음 덜 구체적인 요소로 위쪽으로 전파됩니다.

Netscape의 이벤트 캡처: 이벤트 버블링과 달리 덜 구체적인 노드는 이벤트를 더 일찍 수신하고 가장 구체적인 요소는 이벤트를 마지막에 수신합니다.

DOM 이벤트 흐름: DOM 레벨 2 이벤트는 이벤트 흐름이 대상 단계에 있는 이벤트 캡처 단계와 이벤트 버블링 단계의 세 단계를 포함한다고 규정합니다. 이벤트를 가로챌 수 있는 기회가 주어지고, 실제 대상이 이벤트를 받게 되며, 마지막으로 버블 문장 단계가 됩니다.

Opera, Firefox, Chrome, Safari는 모두 DOM 이벤트 스트리밍을 지원합니다. IE는 이벤트 스트리밍을 지원하지 않고 이벤트 버블링만 지원합니다

다음 html이 있는 경우 div 영역을 클릭하면 다양한 모델 이벤트 요소의 클릭 이벤트가 실행되는 순서는 다음과 같습니다.

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

 

   여기를 클릭하세요

DOM에서 이벤트가 발생하면 이벤트 객체가 생성됩니다. 이 객체에는 이벤트와 관련된 모든 정보가 포함되어 있습니다. 포함 이벤트를 생성한 요소, 이벤트 유형 및 기타 관련 정보입니다. 모든 브라우저는 이벤트 객체를 지원하지만 방식은 다릅니다. 이벤트 개체에는 이벤트가 계속 버블링되거나 캡처되는 것을 방지할 수 있는 메서드(W3C: stopPropagation)/속성(IE: cancelBulle=true)이 있습니다. 이벤트가 요소에 버블링될 때 버블링을 방지하려면 다음과 같이 브라우저 호환 메서드를 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.function stopPropagation(e) {//Pass 이벤트 객체 Enter

if (e.stopPropagation) //W3C 표준 지원

e.stopPropagation();
else //IE8 이하 브라우저
e.cancelBubble = true;
}



모든 브라우저가 이벤트 버블링을 지원하고 브라우저 호환성을 고려하여 일반적으로 이벤트 바인딩 시 이벤트 캡처 대신 이벤트 버블링을 사용합니다. 이를 이해한 후에는 다음 두 가지 개념을 살펴볼 수 있습니다.

아이디어 1

첫 번째 아이디어는 두 단계로 나누어집니다

1단계: 이벤트 핸들러를 문서의 클릭 이벤트에 바인딩하여 div를 숨깁니다

2단계: 이벤트 핸들러를 div의 click 이벤트에 바인딩하여 이벤트가 문서에 버블링되는 것을 방지하고 문서의 onclick 메소드를 호출하면 div가 숨겨집니다.

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

이벤트 개체에는 target(W3C)/srcElement(IE)라는 중요한 속성이 포함되어 있습니다. 이 속성은 이벤트를 트리거한 원래 요소를 식별합니다. 이벤트 핸들러를 문서의 클릭 이벤트에 직접 바인딩할 수 있으며 이벤트 핸들러에서 이벤트 소스가 id==test인 div 요소인지 아니면 하위 요소인지 여부를 확인할 수 있습니다. 그렇다면 return 메서드는 어떤 작업도 수행하지 않습니다. 그렇지 않으면 이벤트가 숨겨집니다.

코드 복사

코드는 다음과 같습니다.

이런 방식으로 페이지의 아무 곳이나 클릭하면 클릭 이벤트가 문서까지 버블링됩니다. 이벤트 핸들러는 이벤트 소스가 id==test인 div인지 하위 요소인지 결정합니다. 메소드 반환입니다. 그렇지 않으면 div가 우리의 요구 사항을 충족할 수도 있습니다.

주의사항과 장점, 단점

이 두 아이디어는 모두 이벤트 버블링에 의존하므로 이벤트 버블링을 방지하는 코드가 포함된 다른 관련 요소의 클릭 이벤트 핸들러의 영향을 피하기 위해 다른 관련 요소의 클릭 이벤트를 처리할 때 이에 주의해야 합니다. 활성화되었습니다.

두 가지 방법 모두 이해하기 쉽습니다. 처리가 더 간단한 것 같습니다. 이벤트 소스를 레이어별로 판단할 필요가 없으며, 클릭 이벤트가 div에 직접 바인딩됩니다. . 이 예에서는 실제로 그렇습니다. 그러나 일부 복잡한 페이지에는 그렇지 않습니다. 수십 개의 div가 있는 페이지가 있는 경우 이러한 유형의 문제를 숨기려면 페이지의 다른 곳을 클릭해야 합니다.

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

                                                                                                         ~ > iv> "2">2

아이디어 1을 사용하여 작성한 코드는 다음과 같습니다.





코드 복사


코드는 다음과 같습니다.

function stopPropagation(e) { if (e.stopPropagation)

e.stopPropagation();

else

e.cancelBubble = true;

}           $(문서) .bind('클릭',function(){                                                                                              $ ('.Dialog'). Bind ('클릭', 함수 (e) { StopPropagation (e); })

& lt;/script & gt;
>

간단하고 똑같아 보이지만 잘 생각해 보면 문제가 있습니다. 각 대화 상자에 비슷한 메서드를 바인딩하면 메모리 측면에서 확실히 비용이 많이 듭니다. 천천히 실행되는 페이지입니다. 그리고 ajax를 동적으로 사용하여 새 대화 상자를 만들면 문제가 다시 발생합니다. 새로 만든 대화 상자는 숨겨진 기능을 구현할 수 없습니다. 바인딩 기능이 실행되었으므로 클릭 이벤트 핸들러는 더 이상 새 대화 상자에 바인딩되지 않습니다. 즉, DOM에 아직 존재하지 않을 수 있는 DOM 요소에 핸들러를 연결할 수 없다는 아이디어입니다. 핸들러를 개별 요소에 직접 바인딩하기 때문에 페이지에 아직 존재하지 않는 요소에는 핸들러를 바인딩할 수 없습니다.

아이디어 2의 실력을 뽐내는 시간입니다. 이때 아이디어 2의 코드가 어떻게 작성되는지 살펴보겠습니다

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

Delegate() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다.

코드 복사

코드는 다음과 같습니다.

$( "table" ).delegate( "td" , "클릭", function() {

$( this ).toggleClass( "chosen" );

});

위 명령문을 통해 클릭 이벤트 핸들러를 모든 테이블의 td에 바인딩할 수 있습니다. 대리자 메서드는 동일한 함수를 DOM의 여러 요소에 하나씩 연결하고 연결하는 대신 단일 요소 또는 작은 요소 그룹에 핸들러를 연결하고 하위 요소에서 이벤트를 수신하도록 설계되었습니다. 페이지의 모든 요소에 핸들러를 직접 연결하는 대신 하나(또는 작은 그룹)의 상위 요소에 핸들러를 연결하면 성능이 최적화될 수 있습니다. jQuery 버전에서는 대화상자가 숨겨집니다

위의 지식을 통해 jQuery의 대리자 메서드가 div를 숨길 필요성을 쉽게 인식할 수 있음을 알 수 있습니다

코드 복사

코드는 다음과 같습니다.