JavaScript의 이벤트 버블 링? 이벤트 전파가 설명되었습니다-JS 튜토리얼-php.cn

JavaScript의 이벤트 버블 링? 이벤트 전파가 설명되었습니다 키 테이크 아웃

JavaScript의 이벤트 버블 링은 하나의 요소가 두 번째 요소 내부에 중첩 될 때 이벤트 핸들러가 호출되는 순서를 나타냅니다. 두 요소 모두 동일한 이벤트에 대한 리스너를 등록했습니다. 이벤트 버블 링 이해와 이벤트 캡처 및 이벤트 전파와 함께 JavaScript에서 이벤트 작업을 수행하는 데 필수적입니다. 이벤트 전파는 이벤트 버블 링 및 이벤트 캡처에 대한 용어입니다. DOM 트리 브랜치의 노드에 첨부 된 주어진 이벤트 유형에 대해 모든 리스너를 호출하는 프로세스를 나타냅니다. 전파는 양방향이며 캡처 단계, 목표 단계 및 기포 단계의 세 단계로 나눌 수 있습니다. 이벤트 전파는 이벤트 객체의 스톱 프로파제 방법을 호출하여 모든 리스너에서 중지 될 수 있습니다. 이것은 전파가 중단됩니다. 즉, 현재 대상을 따르는 전파 경로의 노드에 등록 된 모든 청취자가 호출되지 않음을 의미합니다. 일부 이벤트는 브라우저가 전파 끝에서 실행하는 기본 조치와 관련이 있습니다. 이 기본 조치는 리스너의 예방 표제 메소드를 호출하여 이벤트 취소로 피할 수 있습니다.

이벤트 버블 링은 JavaScript 여행에서 만난 용어입니다. 하나의 요소가 두 번째 요소 내부에 중첩 될 때 이벤트 핸들러가 호출되는 순서와 관련이 있으며 두 요소 모두 동일한 이벤트에 대한 리스너를 등록했습니다 (예 : 클릭).

. 그러나 이벤트 버블 링은 퍼즐의 한 조각 일뿐입니다. 그것은 종종 이벤트 캡처 및 이벤트 전파와 함께 언급됩니다. 그리고 세 가지 개념에 대한 확고한 이해는 JavaScript의 이벤트 작업을 수행하는 데 필수적입니다. 예를 들어 이벤트 위임 패턴을 구현하려는 경우

이 게시물에서 나는이 각 용어를 설명하고 그들이 어떻게 맞는지를 보여줄 것입니다. 또한 JavaScript 이벤트 흐름에 대한 기본적인 이해가 귀하의 응용 프로그램을 세밀하게 제어 할 수있는 방법을 보여 드리겠습니다. 이것은 이벤트의 프라이머가 아니므로 주제에 대한 친숙 함이 가정됩니다. 일반적으로 이벤트에 대해 더 많이 배우고 싶다면 저희 책을 확인하십시오 : JavaScript : Ninja. 이벤트 전파는 무엇입니까? 이벤트 전파부터 시작하겠습니다. 이것은 이벤트 버블 링 및 이벤트 캡처의 담요 용어입니다. 썸네일 갤러리의 링크 된 이미지 목록을 작성하려면 일반적인 마크 업을 고려하십시오.
이미지를 클릭하면 해당 IMG 요소에 대한 클릭 이벤트가 생성 될뿐만 아니라 부모 A, 할아버지 Li 등의 경우에도 모든 요소의 조상을 통해 끝날 때마다 종료됩니다. 창 객체. Dom Terminology에서 이미지는
이벤트 대상 이며, 클릭이 시작된 가장 안쪽 요소입니다. 이벤트 대상과 조상은 부모부터 창 객체에 이르기까지 Dom Tree에 분기를 형성합니다. 예를 들어, 이미지 갤러리 에서이 분기는 IMG, A, Li, UL, Body, HTML, Document, Window. 는 Window가 실제로 DOM 노드가 아니지만 EventTarget 인터페이스를 구현하므로 단순화를 위해 문서 객체의 상위 노드처럼 처리하고 있습니다.
.
이 분기는 사건이 전파되는 경로 (또는 흐름)이기 때문에 중요합니다. 이 전파는 지점의 노드에 첨부 된 주어진 이벤트 유형에 대해 모든 청취자를 호출하는 과정입니다. 각 청취자는 이벤트와 관련된 정보를 수집하는 이벤트 객체와 함께 호출됩니다 (나중에 자세한 내용).
여러 청취자가 동일한 이벤트 유형의 노드에 등록 할 수 있습니다. 전파가 그러한 노드에 도달하면 리스너는 등록 순서대로 호출됩니다.
또한 분기 결정은 정적이며, 즉, 이벤트의 초기 파견에서 확립된다는 점에 유의해야합니다. 이벤트 처리 중에 발생하는 트리 수정은 무시됩니다 전파는 창에서 이벤트 대상까지의 양방향입니다. 이 전파는 세 가지 단계로 나눌 수 있습니다 :

창에서 이벤트 대상으로 : 이것은 캡처 위상
입니다. 이벤트 대상 자체 : 이것은
대상 위상

입니다 이벤트에서 에서 대상 부모를 다시 창으로 대상으로합니다.
이 단계를 차별화하는 것은 호출되는 청취자의 유형입니다. 이벤트 캡처 위상 이 단계에서는
capturer
리스너 만 호출됩니다.
이 매개 변수가 생략되면 기본값은 거짓이고 리스너는 캡처가 아닙니다. 따라서이 단계에서는 창에서 이벤트 대상 부모로의 경로에서 발견 된 체포 자만이 호출됩니다. 이벤트 목표 단계
이 단계에서 캡처 플래그의 값에 관계없이 이벤트 대상에 등록 된 모든 청취자가 호출됩니다. 이벤트 버블 링 단계 이벤트 기간 동안 버블 링 단계 중에 만 캡처가 부름을받습니다. 즉, addeventListener ()의 세 번째 매개 변수에 대한 거짓 값으로 등록 된 청취자 만 는 캡처 단계를 통해 모든 이벤트가 이벤트 대상으로 흐르지 만, 초점, 블러, 하중 및 다른 이벤트는 거품을 일으키지 않습니다. 즉, 그들의 여행은 target
위상 이후에 멈 춥니 다 따라서 전파가 끝나면 지점의 각 청취자가 정확히 한 번 호출되었습니다.
이벤트 버블 링은 모든 종류의 이벤트에 대해 발생하지 않습니다. 전파하는 동안, 청취자가 이벤트 객체의 .Bubbles 부울 속성을 읽음으로써 이벤트가 거품되는지 알 수 있습니다. 3 가지 이벤트 흐름 단계는 W3C Uievents 사양의 다음 다이어그램에 설명되어 있습니다.

Copyright © 2016 월드 와이드 웹 컨소시엄, (MIT, Ercim, Keio, Beihang).
전파 정보에 액세스 나는 이미 이벤트 객체의 .Bubbles 속성을 언급했습니다. 이 객체에서 제공하는 다른 속성이 여러 가지가 있습니다. 청취자는 전파와 관련하여 정보에 액세스 할 수 있습니다.
e.target 참조 이벤트 대상 e.currentTarget은 러닝 리스너가 등록 된 노드입니다. 이것은 리스너 호출 컨텍스트의 동일한 값, 즉이 키워드에서 참조 된 값입니다. 우리는 E.EventPhase를 사용하여 현재 단계를 찾을 수 있습니다. 3 개의 이벤트 생성자 상수 중 하나를 참조하는 정수입니다. capturing_phase, bubbling_phase 및 at_target.
연습에 넣는 위의 개념을 실제로 보자. 다음 펜에는 B0… B4라는 5 개의 중첩 된 사각형 상자가 있습니다. 처음에는 외부 박스 B0 만 볼 수 있습니다. 내부는 마우스 포인터가 그들 위로 떠날 때 보여줄 것입니다. 상자를 클릭하면 오른쪽 테이블에 전파 흐름의 로그가 표시됩니다.
Codepen에서 sitepoint (@sitepoint)의 펜 jmxdpz를 참조하십시오 상자 밖에서 클릭 할 수도 있습니다.이 경우 이벤트 대상은 클릭 화면 위치에 따라 본문 또는 HTML 요소가됩니다. 전파 중지 이벤트 전파는 이벤트 객체의 스톱 포거레이션 방법을 호출하여 모든 리스너에서 중지 될 수 있습니다. 이는 현재 대상을 따르는 전파 경로의 노드에 등록 된 모든 청취자가 호출되지 않음을 의미합니다. 대신, 현재 대상에 첨부 된 다른 모든 청취자는 여전히 이벤트를받습니다. 우리는 이전 데모의 간단한 포크 로이 동작을 확인할 수 있습니다. 여기서 우리는이 새로운 청취자를 창에 등록 된 콜백 목록에 캡처로 선정했습니다.
이 방법으로, 클릭하는 상자가 무엇이든, 전파는 일찍 중단되어 창의 캡처 리스너에만 도달합니다. 즉각적인 전파 중지 그 이름으로 표시된 바와 같이, stopimmediatepropagation은 브레이크를 곧바로 던져 현재 청취자의 형제 자매조차 이벤트를받지 못하게합니다. 우리는 마지막 펜으로의 최소한의 변화로 이것을 볼 수 있습니다 :

<ul> <li><a href="..."><img src="..." alt=""></a> <li><a href="..."><img src="..." alt=""></a> ... <li><a href="..."><img src="..." alt=""></a> </ul> 
로그인 후 복사
이제 로그 테이블에 출력이 없습니다. C1 및 C2 창은 줄을 쫓아 내지 않습니다. 새 리스너의 실행 후 전파가 중지되기 때문입니다. 이벤트 취소
일부 이벤트는 브라우저가 전파 끝에서 실행하는 기본 조치와 관련이 있습니다. 예를 들어, 링크 요소를 클릭하거나 양식 제출 버튼을 클릭하면 브라우저가 새 페이지로 이동하거나 양식을 각각 제출하게됩니다. 리스너에서 이벤트 객체 인 E.preventDefault의 또 다른 방법을 호출하여 이벤트 취소와 함께 그러한 기본 조치의 실행을 피할 수 있습니다.
결론 그와 함께, 나는 이벤트 버블 링과 이벤트 캡처 작업이 JavaScript에서 어떻게 일을 보여 주었으면 좋겠다. 질문이나 의견이 있으시면 아래 토론에서 기꺼이들을 수 있습니다.

참조
문서 객체 모델 (DOM) 레벨 2 이벤트 사양
W3C DOM4 - 이벤트 dom - 살아있는 표준 - 이벤트 W3C UI 이벤트 - DOM 이벤트 아키텍처 msn - 이벤트 및 dom

이 기사는 Yaphi Berhanu와 Dominic Myers가 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! JavaScript에서 이벤트 버블 링에 대한 자주 묻는 질문 (FAQ)
이벤트 버블 링과 이벤트 캡처 사이의 주요 차이점은 무엇입니까?

이벤트 버블 링과 이벤트 캡처는 다른 요소 내부의 요소에서 이벤트가 발생할 때 HTML DOM API에서 이벤트 전파의 두 가지 방법입니다. 요소는 해당 이벤트에 대한 핸들을 등록했습니다. 주요 차이점은 DOM 트리에 대한 사건의 전파 방향에 있습니다. 이벤트에서 버블 링에서 이벤트는 먼저 가장 깊은 대상 요소를 트리거하고 부모에게 거품을 일으킨다. 반면에, 이벤트 캡처는 이벤트가 부모로부터 시작하여 대상 요소로 내려가는 것과 관련이 있습니다.
JavaScript에서 이벤트 버블 링을 중지하려면 어떻게해야합니까? stoppropagation () 메소드를 사용하여 버블 링. 이 방법은 캡처 및 버블 링 단계에서 현재 이벤트의 추가 전파를 방지합니다. 예는 다음과 같습니다. element.addeventListener ( 'click', function (event) {}); 요소가 클릭하면 이벤트가 클릭되면 이벤트가 이벤트가 있습니다. 부모 요소까지 거품을 일으키지 않습니다.

JavaScript에서 이벤트 버블 링의 실질적인 사용은 무엇입니까?

이벤트 버블 링은 JavaScript에서 특정 이벤트를 처리하는 데 매우 유용 할 수 있습니다. 예를 들어, 여러 자식 요소가있는 부모 요소가 있고 이러한 모든 요소에서 특정 이벤트를 듣고 싶다면 이벤트 리스너를 부모로 설정하고 이벤트 버블 링을 활용할 수 있습니다. 이런 식으로, 이벤트가 어린이 요소에서 트리거 될 때마다 부모에게 거품이 생겨서 처리 할 수 있습니다.
. 동시에 이벤트 버블 링 및 캡처를 사용할 수 있습니까?
예, 이벤트 버블 링 및 캡처를 동시에 사용할 수 있습니다. 이것은 이벤트 대표단이라고합니다. 개별 아동 요소에서 이벤트 리스너를 설정하는 대신 이벤트 처리를 부모 요소로 위임하는 기술입니다. 이것은 많은 어린이 요소가있을 때 특히 유용 할 수 있습니다.
JavaScript에서 이벤트 전파의 기본 동작은 무엇입니까?
JavaScript에서 이벤트 전파의 기본 동작은 이벤트 버블 링입니다. 이는 기본적으로 이벤트가 대상 요소에서 시작하여 문서의 루트까지 시작한다는 것을 의미합니다. 그러나 usecapture 매개 변수를 true로 설정하여 addeventListener () 메소드를 사용 하여이 동작을 변경할 수 있습니다. 이는 이벤트 캡처가 가능합니다.
이벤트 버블 링은 중첩 요소와 어떻게 작동합니까?

언제 이벤트는 중첩 요소에서 발사되며,이 행사는 Dom Tree의 중첩 요소의 조상을 통해 전파됩니다. 이것은 이벤트 버블 링입니다. 각 조상은 차례로 이벤트에 응답 할 기회를 얻습니다. 이 전파는 문서의 루트에 도달 할 때까지 또는 stoppropagation ()가 호출 될 때까지 계속됩니다.
이벤트에서 이벤트의 기본 조치를 방지 할 수 있습니까? extendefault () 메소드를 사용하여 이벤트의 이벤트의 기본 조치. 이 메소드는 취소 가능하면 이벤트를 취소합니다. 즉, 이벤트에 속하는 기본 조치는 발생하지 않습니다.
JavaScript에서 이벤트 전파 순서는 무엇입니까?
이벤트 전파 순서 JavaScript에서는 단계, 표적 단계 및 버블 링 단계를 캡처합니다. 캡처 단계에서 이벤트는 요소로 내려갑니다. 대상 단계는 이벤트가 대상 요소에 도달 한 곳입니다. 버블 링 단계는 이벤트가 요소에서 기포 될 때입니다.

이벤트가 버블 링인지 아닌지 확인할 수있는 방법은 무엇입니까?

이벤트가 버블 링인지 확인할 수 있는지 확인할 수 있습니다. 이벤트 객체의 기포 속성. 이 속성은 이벤트가 DOM을 통과하는지 여부를 나타내는 부울 값을 반환합니다. ) 메소드는 이벤트 전파를 중지하는 데 사용됩니다. 차이점은 stopPropagation ()가 이벤트 체인을 버블 링하는 것을 막는 반면 stopimmediatePropagation ()은 같은 이벤트의 다른 청취자가.