Js 버블링 이벤트 방지 code_javascript 기술

1. 이벤트 대상

이제 이벤트 핸들러의 이벤트 변수가 이벤트 개체를 보유합니다. event.target 속성은 이벤트가 발생한 대상 요소를 저장합니다. 이 속성은 DOM API에 지정되지만 모든 브라우저에서 구현되는 것은 아닙니다. jQuery는 이 속성을 모든 브라우저에서 사용할 수 있도록 이 이벤트 개체에 필요한 확장을 만듭니다. .target을 사용하면 이벤트를 처음 수신한 DOM 요소(예: 실제로 클릭된 요소)를 확인할 수 있습니다. 또한 이것이 이벤트를 처리하는 DOM 요소를 참조한다는 것을 알고 있으므로 다음 코드를 작성할 수 있습니다.

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

$(document).ready(function(){
$('#switcher').click(function(event){
$(' #switcher .button').toggleClass('hidden');
})
})

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

이때의 코드는 클릭한 요소가

이고 다른 하위 요소가 아닌지 확인합니다. 이제 버튼을 클릭해도 스타일 변환기가 더 이상 축소되지 않으며, 테두리를 클릭하면 축소 작업이 실행됩니다. 그러나 레이블을 클릭해도 하위 요소이기 때문에 아무 작업도 수행되지 않습니다. 사실 여기에 체크 코드를 넣을 수는 없지만 목표를 달성하기 위해 버튼의 동작을 수정합니다.

2. 이벤트 전파 중지

이벤트 객체는 이벤트 버블링을 완전히 방지할 수 있는 .stopPropagation() 메서드도 제공합니다. .target과 마찬가지로 이 메서드는 순수한 JavaScript 기능이지만 크로스 브라우저 환경에서는 안전하게 사용할 수 없습니다. 그러나 jQuery를 통해 모든 이벤트 핸들러를 등록하는 한 이 방법을 안전하게 사용할 수 있습니다.
다음으로 방금 추가한 check 문인 event.target ==를 삭제하고 버튼의 클릭 핸들러에 일부 코드를 추가합니다.

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

$(document).ready(function( ){
$('#switcher .button').click(funtion(event){
//……
event.stopPropagation();
})
})

이전과 마찬가지로 이벤트 객체에 접근하려면 클릭 핸들러로 사용되는 함수에 매개변수를 추가해야 합니다. 그러면 간단히 event.stopPropagation()을 호출하여 다른 모든 DOM 요소가 이 이벤트에 응답하는 것을 방지할 수 있습니다. 이런 방식으로 버튼 클릭 이벤트는 버튼에 의해 처리되고 버튼만 처리됩니다. 스타일 변환기의 다른 곳을 클릭하면 전체 영역이 축소되거나 확장됩니다.

3. 기본 동작

클릭 이벤트 핸들러를 외부

대신 앵커 요소에 등록하면 또 다른 문제에 직면해야 합니다. 사용자가 링크를 클릭하면 브라우저가 새 페이지를 로드합니다. 이 동작은 앵커 요소를 클릭하기 위한 기본 작업인 이벤트 핸들러와 동일한 개념이 아닙니다. 마찬가지로 사용자가 양식을 편집한 후 Enter 키를 누르면 해당 양식의 제출 이벤트가 트리거되고 이 이벤트가 발생한 후 실제로 양식 제출이 발생합니다.
이 기본 작업이 수행되는 것을 원하지 않는 경우 이벤트 객체에서 .stopPropagation() 메서드를 호출해도 도움이 되지 않습니다. 기본 작업은 일반 이벤트 전파 흐름에서 발생하지 않기 때문입니다. 이 경우 .preventDefault() 메서드는 기본 작업을 트리거하기 전에 이벤트를 종료할 수 있습니다.
팁 .preventDefault()는 일반적으로 이벤트 컨텍스트에서 일부 유효성 검사가 완료된 후에 사용됩니다. 예를 들어 양식 제출 시 사용자가 필수 필드를 입력했는지 확인하고, 사용자가 해당 필드를 입력하지 않은 경우 기본 동작을 방지해야 합니다. 8장에서 양식 유효성 검사에 대해 자세히 설명합니다.
이벤트 전파와 기본 작동은 두 개의 독립적인 메커니즘입니다. 둘 중 하나가 발생하면 다른 하나는 종료될 수 있습니다. 이벤트 전파와 기본 작업을 모두 중지하려면 이벤트 핸들러에서 false를 반환하면 됩니다. 이는 이벤트 개체에서 .stopPropagation() 및 .preventDefault()를 모두 호출하는 간단한 방법입니다.

보충사항:

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

//버튼 클릭 이벤트(텍스트 스타일 변경)
$(document).ready(function() {
$('#switcher .button').click(function() {
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body').addClass('large');
}

$(' # 스위처 .button').removeClass('selected');
$(this).addClass('selected');
});
});

//이벤트를 트리거하려면 버튼의 외부 div를 클릭하세요(숨겨진 버튼)
$(document).ready(function() {
$('#switcher').click(function() {
$('#switcher .button').toggleClass('hidden');
});
});

이제 문제는 버튼이 클릭과 동시에 숨겨진 버튼 이벤트가 발생합니다. 이는 이벤트 버블링으로 인해 발생합니다.
이벤트가 버블링되는 것을 방지하려면 숨겨진 버튼 기능에 매개변수를 추가해야 합니다.

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

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

이벤트 객체를 저장하는 경우에도 target 속성은 이벤트가 발생한 대상 요소를 보유합니다. DOM에서 어떤 요소가 먼저 이벤트를 수신했는지 확인할 수 있습니다. 이 시점에서 코드는 하위 요소가 아닌

를 클릭했는지 확인합니다.

목표를 달성하기 위해 버튼의 동작을 수정하여 이 작업을 수행할 수도 있습니다.

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

$(document).ready(function( ) {
$('#switcher .button').click(function(even) {
$('body').removeClass();
if (this.id == 'switcher-narrow) ') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body' ).addClass ('대형');
}

$('#switcher .button').removeClass('selected');
$(this).addClass('selected') ;
even.stopPropagation();
});
});

JS로 이벤트 버블링 방지

이벤트 버블링: 마우스로 버튼을 클릭하는 등 요소에서 이벤트가 트리거되면 해당 요소의 모든 상위 요소에서 동일한 이벤트가 트리거됩니다. 이 프로세스를 이벤트 버블링이라고 합니다. 이벤트는 원래 요소에서 DOM 트리의 맨 위로 올라갑니다.
JS를 사용하면 js 이벤트가 버블링되는 것을 방지할 수 있습니다. 브라우저의 차이로 인해 IE와 FF의 JS 작성 방법은 약간 다릅니다.
IE는 이를 방지하기 위해 cancelBubble=true를 사용하고, FF는 stopPropagation 메소드를 사용해야 합니다.
다음 완성 코드:

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

> ;

点击aaaa会触发上层的onclick事件，点击bbbb不会触发上层onclick事件

 
   
   
 
 
   
   
 
 
   
   
 

aaaa	bbbbbb