jQuery_jquery에서 버블링 이벤트를 방지하는 방법 소개

1.버블링 이벤트 소개

컨트롤을 클릭할 때 이 컨트롤을 포함한 상위 컨트롤에도 클릭 이벤트가 있으면 실행이 계속됩니다.
예를 들어 div 아래에 클릭 이벤트가 있으면 알림이 두 번 나타납니다. 이러한 현상을 버블링 이벤트라고 합니다.

이 이벤트는 원래 요소에서 DOM 트리 상단까지 버블링됩니다.
대상 요소: 이벤트의 대상 요소는 첫 번째 요소인
예제의 버튼이며 요소 개체의 속성으로 나타납니다. 이벤트 프록시를 사용하면 요소에 이벤트 핸들러를 추가하고
이벤트가 하위 요소에서 버블링될 때까지 기다리며 이벤트가 시작되는 요소를 쉽게 알 수 있습니다.
참고:
흐림, 초점, 로드 및 언로드는 다른 이벤트처럼 버블링될 수 없습니다. 실제로 이벤트 버블링(IE 이외의 브라우저에서)보다는 이벤트 캡처를 사용하여 흐림 및 초점을 얻을 수 있습니다.

2. jQuery 이벤트 버블링 방지

jQuery에는 DOM 이벤트 트리거를 위한 버블링 기능이 있습니다. 때때로 이 기능을 활용하면 코드 중복을 줄일 수 있지만 때로는 이벤트가 버블링되는 것을 원하지 않을 수도 있습니다. 이때 jQuery.Event가 버블링되는 것을 방지해야 합니다.

jQuery.Event 문서 시작 부분에서 우리는 jQuery.Event 객체가 W3C 표준을 준수하는 이벤트 객체라는 것을 배웠습니다. 동시에 jQuery.Event를 사용하면 IE와의 호환성을 확인할 필요가 없습니다.
jQuery.Event는 이벤트 버블링을 중지하는 매우 간단한 방법을 제공합니다. event.stopPropagation();

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

$("p").click(function(event){
event.stopPropagation();
// 뭔가를 하세요
})

그러나 이 메서드는 live를 사용하여 바인딩된 이벤트에는 영향을 미치지 않습니다. 이벤트가 버블링되는 것을 방지하려면 더 간단한 메서드가 필요합니다. false를 반환합니다.

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

$(this).after("또 다른 문단!");

거짓 반환 });

다중 브라우저 종료 버블링 기능과 호환:

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

function stopDefault(e) {
//기본 브라우저 동작 차단(W3C)
if (e && e.preventDefault)
브라우저의 기본 동작 방법
else
창 .event.returnValue = false;
return false;
}

3. event.tatget 속성을 사용하여 이벤트 객체를 명확히 합니다

이벤트 핸들러의 이벤트 변수는 이벤트 개체를 보유합니다. event.tatget 속성은 이벤트가 발생한 대상 요소를 저장합니다. 이 속성은 DOM API에 지정되지만 모든 브라우저에서 구현되는 것은 아닙니다. jQuery는 이 속성을 모든 브라우저에서 사용할 수 있도록 이 이벤트 개체에 필요한 확장을 만듭니다. .target을 통해 이벤트를 처음 수신한 DOM의 요소를 확인할 수 있습니다. 게다가 우리는 이것이 이벤트를 처리하는 DOM 요소를 참조한다는 것을 알고 있습니다.

event.tatget 속성을 사용하여 이벤트 객체를 명확히 합니다

이벤트 버블링 방지 코드는 다음과 같습니다.

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

$ (document).ready(function() {
$('switcher').click(function(event){
if(event.target == this)
{
$('switcher .button').toggleClass('hidden');
       }
     };)
});