이벤트 버블 링 및 이벤트 캡처는 이벤트 흐름 시점에 JavaScript에서 가장 많이 사용되는 용어입니다. 이것은 HTML DOM API에서 이벤트 전파의 두 가지 방법입니다. JavaScript의 이벤트 버블 링 및 이벤트 캡처에 대한이 기사에서는 다음 순서로 :
JavaScript에서 이벤트 버블 링이란 무엇입니까?
Event Bubbling은 웹 애플리케이션이나 웹 페이지를 개발하는 동안 사람들이 만나야하는 용어입니다. . 기본적으로 이벤트 버블 링은 한 항목이 다른 항목에 중첩되고 동일한 이벤트에 속해야 할 때 이벤트 핸들러가 호출되는 기술입니다. 캡슐화와 유사합니다.
이벤트 버블 링은 JavaScript에서 이벤트 처리의 일부일뿐입니다. 이를 더 잘 이해하려면 이벤트 전파와 이벤트 버블 링을 지원하는 방법에 대해 알아야합니다.
이벤트 전파 란 무엇입니까?
이벤트 전파는 이벤트 버블 링 및 캡처를 자식으로하는 부모 용어로 비교할 수 있습니다.다음과 같이 표시됩니다.
이미지를 클릭하면 클릭 이벤트가 생성 될뿐만 아니라 부모 'a'와 할아버지 'li'로 이동합니다. 이런 식으로 기능 전파가 발생합니다. 여기서 이미지는 자식으로 간주되며 클릭이 생성되는 이벤트 대상입니다. 조상과 함께 이미지는 함께 트리 용어로 가지를 형성합니다. 분기는 이벤트가 전파되는 경로를 알기 때문에 중요합니다.
피보나치 C ++ 재귀
각 리스너는 이벤트에 대한 정보를 수집하는 이벤트 객체와 함께 호출됩니다. 이 전파는 주어진 이벤트에 대해 모든 리스너를 호출하는 프로세스를 알기 때문에 매우 중요합니다. 위의 그림에서 분기 결정이 정적임을 알 수 있습니다. 이벤트 중에 발생하는 모든 트리 수정은 무시됩니다. 여기서 전파는 양방향으로 창에서 이벤트 대상으로 이동하고 다시 돌아옵니다. 여기에서 전파는 크게 세 가지 주요 유형으로 분류됩니다. 사람들은:
- 캡처 단계 : 창에서 이벤트 대상 단계로 이동합니다.
- 목표 단계 : 목표 단계입니다.
- 버블 단계 : 이벤트 대상 부모에서 창으로 돌아갑니다.
이벤트 캡처 란 무엇입니까?
이 단계에서는 값이 'true'로 등록 된 캡처 러 리스너가 호출됩니다.. 다음과 같이 작성됩니다.
el.addEventListener ( '클릭', 리스너, true)
여기에서 리스너 값이 'true'로 등록되어이 이벤트가 캡처됩니다. 값이 없으면 기본적으로 값이 false이고 이벤트가 캡처되지 않습니다. 따라서이 단계에서 값이 true 인 이벤트는 창에서 자신의 길을 찾아 호출되고 캡처됩니다.
그런 다음 이벤트 대상 단계에서 등록 된 모든 리스너는 플래그 상태가 true 또는 false인지에 관계없이 호출됩니다.
JavaScript에서 이벤트 버블 링 및 이벤트 캡처 사용
버블 링 단계에서는 플래그 값이 'false'인 이벤트 인 비 캡처 러 만 호출됩니다. 이벤트 버블 링 및 이벤트 캡처는 DOM (문서 개체 모델) 용어에서 매우 유용하고 중요합니다.
el.addEventListener ( 'click', listener, false) // 리스너가 캡처하지 않음 el.addEventListener ( 'click', listener) // 리스너가 캡처하지 않음
위의 코드는 버블 링 및 캡처 단계의 작업을 보여줍니다. 모든 이벤트가 이벤트 대상으로 이동하는 것은 아닙니다. 그들 중 일부는 거품이 일지 않습니다. 그들의 여행은 목표 단계 후에 멈 춥니 다. 세 가지 이벤트 단계 흐름은 다음 다이어그램에 설명되어 있습니다.
이벤트 버블 링은 모든 유형의 이벤트에서 작동하지 않지만 리스너는 '.거품 ”이벤트 객체의 부울 속성입니다. 다른 속성 중 일부는 다음과 같습니다.
- e.target : 이벤트 대상을 참조합니다.
- e.currentTarget : 현재 리스너가 등록 된 모드입니다. 여기서 값은 다음을 사용하여 참조됩니다. 이 예어.
- e.eventPhase : 다음과 같은 다른 세 키워드를 참조하는 정수입니다. 캡처 링 단계, 버블 링 단계, AT_ 타겟 단계.
작업 절차
위의 그림을 자세히 살펴 보겠습니다. 'buttonOne'요소를 클릭하면 즉시 이벤트가 트리거됩니다. 일반적으로 이벤트는 트리의 최상위 요소 인 루트에서 여행을 시작합니다. 그런 다음 'buttonOne'인 대상 이벤트 트리를 따라갑니다. 여행 방법은 다음과 같습니다.
그림에서 볼 수 있듯이 이벤트는 DOM 용어를 통해 결국 대상 이벤트에 도달합니다. 이제 이벤트가 대상에 도달하면 종료되지 않습니다. 아래 그림과 같이 DOM 용어 내에서 계속 진행됩니다.
파이썬에서 포맷은 무엇을합니까?
이전과 마찬가지로 이벤트 경로를 따라 올라가는 모든 요소는 그 존재에 대한 알림을받습니다. 이렇게 진행됨에 따라 우리가 프로세스를 멈출 수 있는지 여부를 생각해야합니다. 음, 질문에 대한 대답은 예입니다. 이벤트 전파를 중지 할 수 있습니다. 이것은 “stopPropagation” 이벤트 개체의 메서드.
window.addEventListener ( 'click', e => {e.stopPropagation ()}, true) window.addEventListener ( 'click', listener ( 'c1'), true) window.addEventListener ( 'click', listener ( 'c2 '), true) window.addEventListener ('click ', listener ('b1 ')) window.addEventListener ('click ', listener ('b2 '))키워드를 적용하여 전파를 중지 할 수 있습니다. ''키워드를 적용하면 이렇게 작동합니다. stopPropagation” 그러면 기본 이벤트 아래의 모든 이벤트가 호출되지 않으므로 위의 코드에서 언급 한대로 호출되지 않습니다. '라는 또 다른 키워드가 있습니다. stopImmediatePropagation”입니다. 이름에서 알 수 있듯이 형제 자매의 절차를 즉시 중지합니다.
이것으로 우리는 우리 기사의 끝까지 왔습니다. JavaScript에서 이벤트 버블 링 및 이벤트 캡처가 무엇인지 이해 하셨기를 바랍니다.
이제 JavaScript의 이벤트 버블 링 및 이벤트 캡처에 대해 알았으니 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.
질문이 있으십니까? '자바 스크립트에서 이벤트 버블 링 및 이벤트 캡처'의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.