이벤트 버블링이란 무엇입니까? jquery_jquery로 이벤트 버블링을 방지하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

(1) 이벤트 버블링이란
먼저 이벤트가 발생하면 이벤트에는 항상 이벤트 소스, 즉 이벤트를 발생시킨 객체가 있다는 점을 이해해야 합니다. 허공에서 생성될 수 없는 현상이 발생합니다.

이벤트가 발생하면 이벤트가 확산되기 시작합니다. 왜 퍼뜨렸나요? 이벤트 소스 자체에는 이벤트를 처리하는 기능이 없기 때문입니다. 예를 들어, 버튼을 클릭하면 클릭 이벤트가 생성되지만 버튼 자체는 이 이벤트를 처리할 수 없습니다(말도 안되는 소리). 이벤트를 처리할 수 있는 코드에 도달하려면 이벤트가 버튼에서 전파되어야 합니다. onclick 버튼을 제공합니다. 이 속성에는 함수 이름이 할당되어 이 함수가 버튼의 클릭 이벤트를 처리하도록 합니다.

이벤트가 전파 중에 이를 처리할 수 있는 함수를 찾으면 이 함수가 이벤트를 캡처했다고 말합니다.

이렇게 말하면 핵심 질문이 나옵니다. 즉, 함수가 이벤트를 어떻게 캡처합니까? 여기에는 이벤트 버블링이 포함됩니다.

버블링의 개념을 더 잘 이해하기 위해 앞에 물컵이 있다고 상상해 보시길 권하는데, 이 물컵은 우리가 흔히 보는 물컵과 조금 다릅니다. 하나의 레이어는 하나 이상의 영역으로 나누어집니다. 최상위 수준은 우리에게 익숙한 창 개체(창 개체)입니다. 다음 레이어는 여러 영역(문서 개체, 기록 개체 등)으로 나뉩니다. 문서 개체의 다음 레이어는 여러 하위 개체로 나뉩니다.

이러한 개체의 계층적 관계가 DOM의 개체 트리를 구성합니다.
이벤트 전파는 방향성이 있습니다. 버튼을 클릭하면 생성된 이벤트가 버튼에서 위쪽으로 전파되기 시작합니다(마치 컵 바닥에서 거품이 솟아오르는 것을 이벤트 버블링이라고 합니다). 이 이벤트는 항상 특정 속성에 값이 있는지 여부를 찾습니다. 예를 들어, 버튼의 click 이벤트는 먼저 버튼에 onclick 속성에 대한 의미 있는 정의가 있는지 찾습니다(즉, 속성이 기존 함수나 실행 가능한 명령문을 가리킴). 그렇다면 함수나 명령문을 실행합니다. ; 객체가 onclick을 정의하는 경우 이벤트는 계속해서 위쪽으로 전파되어 버튼의 상위 개체(예: 양식 개체 또는 문서 개체, 즉 버튼의 상위 개체를 포함함)에 도달합니다. 속성의 경우 속성 값이 실행됩니다.

그래서 이 버튼에 3개의 레이어(양식, 문서, 창)가 있고 이 3개의 레이어가 모두 onclick 속성을 정의하면 버튼의 클릭 이벤트가 발생하면 4개(버튼 포함) 자체) 기능을 수행하거나 4개의 문을 실행합니다.
이러한 이벤트 특성은 레벨 0 DOM에도 적용됩니다.

(2) 이벤트 버블링을 방지하는 jquery 예시
1. 기본 동작을 취소하고 false를 반환하여 이벤트 버블링을 방지합니다.
jQuery 코드:

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

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

2. PreventDefault( ) 메소드만 기본 동작을 취소합니다.
jQuery 코드:

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

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

3. stopPropagation() 메소드를 사용하면 이벤트 버블링만 방지할 수 있습니다.
jQuery 코드:

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

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

(3 ) js 이벤트 버블링 확인
오늘의 질문은 주로 객체, 트리거 이벤트, 캡처 이벤트, 실행 처리, 버블링 등 여러 키워드와 관련되어 있습니다. 이것은 실제로 전체 js 실행 프로세스입니다. 버블링 과정은 매우 흥미롭습니다. 사실 물컵과 비슷하지만, 이 물컵이 겹겹이 쌓여 있고, 아래쪽이 현재 이벤트를 발생시키는 객체입니다. 그런 다음 위로 올라갈수록 범위가 커지고 맨 위 레이어는 확실히 창, 두 번째 레이어는 문서입니다. 플로팅 프로세스 중에 버블은 현재 도달한 레이어에 바인딩된 이벤트 처리 방법이 있는지 여부를 결정합니다. 필요한 경우 해당 처리가 수행됩니다. 그렇지 않다면 계속해서 거품을 내십시오. 최상위 창 레이어에 도달할 때까지. 이벤트가 계속 버블링되는 것을 방지하기 위해 모든 레이어에서 해당 처리를 수행할 수 있습니다. 버블링을 방지하기 위해 이벤트 객체의 메소드를 호출하는 방식입니다. event.stopPropagation(); 다음은 js 이벤트 버블링을 검증하기 위해 작성된 프로세스 메소드입니다.

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

저자별 최신 기사