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

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

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

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

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

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

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

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

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

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

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

 

  테스트 페이지< /title><br></head><br><body><br>  <div><br>   여기를 클릭하세요</div><br></body><br>< /html> <br><br><br><br>

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

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

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

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

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

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

아이디어 1

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

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

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

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