Jquery에서 이벤트 버블링이란 무엇입니까?

버블링 이벤트는 이벤트가 발생한 후 브라우저가 일반적으로 이벤트가 먼저 발생한 요소에서 이벤트 핸들러를 트리거한 다음 해당 상위 요소, 상위 요소의 상위 요소 등을 통해 이벤트의 루트 요소가 나타날 때까지 트리거한다는 것을 의미합니다. 문서. 버블링 이벤트는 이벤트 전파의 가장 일반적인 방법입니다. 이벤트를 처리한 후 이벤트 전파를 중지하고 버블링을 계속하지 않으려면 이벤트 처리 메서드를 바인딩해야 합니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

이벤트 버블링이란 무엇인가요?

버블링 이벤트는 특정 유형의 이벤트가 개체에서 트리거되면 해당 이벤트가 상위 개체로 전파되어 상위 개체에 정의된 유사한 이벤트를 트리거한다는 의미입니다. 이벤트 전파 방향은 물 밑에서 위로 올라오는 물방울과 유사하게 아래에서 위로 진행됩니다.

HTML 문서는 DOM 트리를 시각화할 수 있습니다.

그러면 이벤트 버블링 현상은 다음 그림과 같이 생생하게 표현될 수 있습니다.

간단히 말하면:

이벤트가 발생한 후 일반적으로 브라우저가 이를 트리거합니다. 먼저 이벤트 핸들러는 해당 요소에서 발생하고 그 다음에는 상위 요소, 상위 요소의 상위 요소 등에서 문서의 루트 요소까지 발생합니다.

이를 이벤트 버블링이라고 하며 이벤트가 확산되는 가장 일반적인 방법입니다. 当处理好一个事件后， 你可能想要停止事件的传播，不希望它继续冒泡。就要绑定该事件的处理方法。

위와 같이 버튼을 클릭하면 해당 버튼의 클릭 이벤트가 발생하고 해당 부모의 클릭 이벤트가 발생합니다. 요소 div가 트리거된 다음 본문의 트리거 이벤트가 트리거되고 문서나 창까지 계속됩니다.

버블링의 예

방법:

효과:

3개가 있는 빨간색 상자를 클릭하면 확인 후 팝업 상자 3이 나타납니다. - 팝업 상자 2가 다시 나타납니다.

2개가 있는 노란색 상자를 클릭하면 팝업상자 2가 나타나고, 팝업상자 1이 나타납니다.

1개가 있는 녹색 상자를 클릭하면 팝업 상자 1개만 나타납니다.

즉, 처음 두 상황에서 버블링이 발생했습니다.

누군가가 클릭 이벤트가 기록되는 순서 때문에 발생한다고 말한다면 문서가 로드된 후에 모두 실행되는 것은 아닙니다.

버블 방지 방법:

두 개를 클릭한 후 계속되는 버블링을 방지하려면 다음을 추가하세요.

그러면 두 번째 팝업 상자가 더 이상 하나에 나타나지 않습니다.

jquery는 이벤트 버블링을 방지합니다.

1. 기본 동작을 취소하고 false를 반환하여 이벤트 버블링을 방지합니다.

jQuery 코드:

$("form").bind(
　　"submit", 
　　function() { 
　　　　return false;
　　 }
);

2. PreventDefault() 메소드를 사용하여 기본 동작만 취소하세요.

jQuery 코드:

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.preventDefault();　　
　　}
);

3. stopPropagation() 메서드를 사용하면 하나의 이벤트만 버블링되는 것을 방지할 수 있습니다.

jQuery 코드:

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.stopPropagation();　　
　　}
);

[추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상]

위 내용은 Jquery에서 이벤트 버블링이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!