이벤트 버블링

Event bubbling

이벤트 버블링은 이벤트가 가장 안쪽의 대상 요소에 먼저 트리거한 다음 가장 바깥쪽의 DOM 요소 또는 문서 개체에[2] 도달할 때까지 동일한 중첩 계층 구조에서 대상 요소의 상위 요소(부모)에 연속적으로 트리거하는 이벤트 전파의[1] 한 유형이다(처리자가 초기화되는 경우).그것은 브라우저에서 이벤트가 처리되는 한 가지 방법이다.이벤트는 버튼 클릭, 필드 변경 등 사용자가 수행하는 작업이다.이벤트 핸들러는 버튼을 클릭했거나 웹페이지 로딩을 완료했을 때와 같은 특정 종류의 사용자 인터페이스 이벤트가 발생할 때 코드를 실행하는 데 사용된다.

개요

다음 순서로 중첩된 3개의 요소가 있는 DOM 구조를 고려하십시오.클릭 처리기가 각각 핸들러1(), 핸들러2(), 핸들러3(), 핸들러3()인 요소1(Div), 요소2(Span), 요소3(Button).

DOM 구조에서 이벤트 버블링 작동 방식
<div id="Element1" onclick="Handler1()"""Element2"("enclick="input type="button"ID="Element3" onclick="handler3"("/span) </div"

Element3 버튼을 클릭하면 먼저 Element 3의 이벤트 핸들러가 트리거된 다음, 이벤트가 버블업되어 즉시 상위 요소인 Element 2의 핸들러가 호출되고, 이어 Element 1의 핸들러가 가장 바깥쪽 DOM 요소에 도달할 때까지 계속된다.

이벤트 처리 순서: 핸들러3() - > 핸들러2() -> 핸들러1()

이벤트가 트리거되는 가장 안쪽 요소를 대상 요소라고 한다.[3]대부분의 브라우저들은 이벤트 버블링을 이벤트 전파의 기본 방법으로 간주한다.그러나, 이벤트 버블링의 정반대인 이벤트 캡쳐(Event Capting)라고 알려진 이벤트 전파에 대한 또 다른 접근방식이 있는데,[4] 여기서 이벤트 핸들러는 DOM 구조의 가장 바깥쪽 요소(또는 문서)에서 시작하여 대상 요소까지 이동하여 대상 요소 핸들러를 마지막으로 실행한다.

실행

모든 이벤트 핸들러는 이벤트 버블링을 이벤트 처리의 기본 방법으로 간주한다.그러나 사용자는 자바스크립트에 있는 요소의 addEventListener()에 있는 마지막 매개변수로 지정하여 수동으로 전파 방법을 선택할 수 있다. 

addEventListener("유형", "Listener", "CaptureMode")

CaptureMode가 False일 경우 이벤트 버블링을 사용하여 이벤트를 처리한다.

CaptureMode가 True이면 이벤트 캡처를 사용하여 이벤트를 처리한다.

사용자가 CaptureMode 인수의 값을 지정하지 않으면 기본적으로 이벤트 버블링으로 간주된다.브라우저의 대부분은 이벤트 버블링과 이벤트 캡처를 모두 지원한다(이벤트 캡처를 지원하지 않는 IE <9 및 Opera <7.0 제외).[1]

자바스크립트는 또한 버블이라는 이벤트 속성을 제공하여 이벤트가 버블되는지 여부를 확인한다.이벤트가 DOM 구조의 상위 요소까지 버블업할 수 있는지에 따라 부울 값 True 또는 False를 반환한다. 

var isBubblePosable = event.bubbles;

IsBubblePosible : True, 만약 사건이 조상들에게 거품이 일 수 있다면

IsBubblePosable : False, 이벤트가 버블할[6] 수 없는 경우

이벤트 버블링 사용

한 이벤트에 둘 이상의 처리기가 있는 사례를 처리하기 위해 이벤트 버블 개념을 구현할 수 있다.이벤트 버블링의 주요 용도는 프로그램에 존재하는 디폴트 기능의 등록이다.최근에는 특별히 이벤트 캡처나 거품을 사용하는 개발자가 많지 않다.이벤트 버블을 구현할 필요는 없다. 사용자가 이벤트 때문에 실행된 액션을 추적하는 것은 복잡해질 수 있다.[1]

이벤트 버블 방지

한 요소에 대한 단일 트리거를 중지하여 조상에게 여러 트리거를 발생시키는 것이 유용할 때도 있다.JavaScript는 이벤트 버블을 방지하기 위해 다음과 같은 방법을 제공한다.

1) 스톱프로포메이션():이 방법은 대상 요소의 이벤트 핸들러만 호출하여 특정 이벤트의 부모에 대한 추가 전파를 중지한다.모든 W3C 호환 브라우저에서 지원되지만 버전 9 아래의 Internet Explorer(인터넷 익스플로러)는 다음과 같이 과거 별칭 cancelBubble을 요구한다.[7]

event.cancelBubble = true;

모든 W3C 호환 브라우저의 경우:

event.stopPropagation();

2) 즉시 제안() 중지:이 방법은 추가 전파를 중지할 뿐만 아니라 대상 이벤트의 다른 핸들러도 실행하지 못하게 한다.DOM에서 동일한 이벤트는 여러 개의 독립된 핸들러를 가질 수 있으므로, 하나의 이벤트 핸들러의 실행을 중지하는 것은 일반적으로 동일한 대상의 다른 핸들러에 영향을 미치지 않는다.그러나 stopImmediatePropagation() 방법은 동일한 대상의 다른 처리기의 실행을 방지한다.[7]

모든 W3C 호환 브라우저의 경우:

event.stop즉시 제안();

이벤트 버블링을 멈추기 위한 또 다른 접근방식은 이벤트 자체를 취소하는 것이지만, 이것은 또한 대상 핸들러 실행을 방지한다.

참고 항목

참조

  1. ^ a b c "Javascript - Event order". www.quirksmode.org. Retrieved 2016-09-11.
  2. ^ "HTML DOM Document Objects". www.w3schools.com. Retrieved 2016-09-11.
  3. ^ "Target Event Property".
  4. ^ "Bubbling and capturing JavaScript Tutorial". javascript.info. Retrieved 2016-09-11.
  5. ^ "HTML DOM addEventListener() Method".
  6. ^ "bubbles Event Property". www.w3schools.com. Retrieved 2016-09-11.
  7. ^ a b "Event Bubbling, How to prevent it ?". www.markupjavascript.com. Retrieved 2016-09-11.