Javascript의 이벤트 버블링 및 이벤트 캡처 설명: 활용 방법은?
게시 됨: 2020-03-26목차
소개
JavaScript에서 이벤트 흐름에 사용되는 두 가지 매우 일반적인 용어는 이벤트 버블링 및 이벤트 캡처 입니다.
이는 두 요소가 모두 이벤트에 대한 핸들을 등록하고 이벤트가 다른 요소에 중첩된 요소에서 발생할 때 HTML DOM API에서 이벤트가 전파되는 두 가지 중요한 방법입니다. 요소가 이벤트를 수신하는 순서는 이벤트 전파 모드에 따라 결정됩니다. JavaScript에서 이벤트 버블링 및 이벤트 캡처 를 사용하고 웹 페이지 개발에 필요한 이유 를 알아보려면 계속 읽으십시오 .
핵심 테이크아웃
- 이벤트, 이벤트 흐름, 이벤트 핸들러 및 이벤트 리스너 용어 설명
- JavaScript의 이벤트 버블링 및 이벤트 캡처
- JavaScript에서 이벤트 버블링 및 이벤트 캡처 의 유틸리티
이벤트 및 이벤트 흐름
HTML 웹 페이지와 JavaScript의 상호 작용은 페이지가 사용자 또는 브라우저에 의해 조작될 때 발생하는 이벤트에 의해 조정됩니다. 페이지 로딩, 사용자가 버튼 클릭, 창 닫기 등이 모두 이벤트의 예입니다.
웹 페이지에서 이벤트가 수신되는 순서를 이벤트 흐름이라고 합니다. 이벤트 흐름의 프로세스는 이벤트 캡처(이벤트 가로채기), 이벤트 타겟팅(대상이 이벤트 가져오기) 및 이벤트 버블링(이벤트에 대한 응답)의 3단계로 완료됩니다.
JavaScript의 이벤트 핸들러 및 이벤트 리스너
이벤트 핸들러는 <script> 태그 내부가 아닌 HTML 태그 내부에 작성된 JavaScript 코드입니다. 이벤트 핸들러는 버튼을 누르는 것과 같은 이벤트가 발생할 때 JavaScript를 실행합니다. 기본 구문은 다음과 같습니다. name_of_handler="JavaScript code here"
<a href=”https://www.google.com” onClick=”alert('hello!”)”>Google</a>
이벤트 발생을 기다리는 프로시저는 이벤트 리스너입니다. JavaScript에는 수신할 이벤트를 수신하고 해당 이벤트가 발생하면 두 번째 인수를 호출하는 내장 함수인 addEventListener()가 있습니다. 구문은 다음과 같습니다. element.addEventListener(event, listener);
JavaScript의 이벤트 버블링
이벤트 버블링은 JavaScript를 사용하여 웹 페이지 또는 웹 응용 프로그램을 개발할 때 접하게 되는 일반적인 용어입니다. 이벤트 버블링은 이벤트가 DOM에서 가장 구체적인 요소 또는 가장 깊게 중첩된 노드에서 시작하여 가장 덜 구체적인 노드, 즉 문서 쪽으로 위쪽으로 흐를 때 이벤트 흐름 과정의 한 단계입니다.
원천
<!DOCTYPE HTML>
<html>
<머리>
<제목>……</제목>
</head>
<본체>
<div id="demo"> 여기를 누르세요.</div>
</바디>
</html>
<div> 요소를 클릭하면 'click' 이벤트가 다음 순서로 발생합니다.
- <div>
- <본체>
- <html>
- 문서
'click' 이벤트는 <div> 요소를 발생시킵니다. 각 노드는 이후에 개체 문서에 도달할 때까지 DOM 트리를 따라 위쪽으로 실행됩니다.
읽기: 전체 스택 프로젝트 아이디어 및 주제
JavaScript의 이벤트 캡처
이벤트 캡처는 Netscape 브라우저에서 처음 도입된 이벤트 흐름의 대체 모델입니다. 이 모델에서 언급한 바와 같이 가장 덜 구체적인 노드가 이벤트를 먼저 수신하고 가장 구체적인 노드 또는 가장 깊이 중첩된 요소가 이벤트를 마지막에 수신합니다. 이 모델에서 이벤트는 실제 목표에 도달하기 전에 차단됩니다. 그러나 Event Bubbling과 달리 최신 브라우저는 이 모델에 대한 지원이 부족하므로 Event Capturing은 특정 상황에서만 사용할 수 있습니다.
원천
이전 섹션에서 설명한 예를 참조하여 <div> 요소를 클릭하면 다음 순서로 'click' 이벤트가 발생합니다.
- 문서
- <본체>
- <html>
- <div>
이벤트 캡처 단계에서는 어떻게 됩니까?
이벤트 캡처 단계에서는 값이 "true"로 등록된 캡처 리스너가 호출됩니다. 다음과 같은 방식으로 작성됩니다.
el.addEventListener('클릭', 리스너, true)
여기서 리스너의 값이 "true"로 등록되어 이벤트가 캡처됩니다. 값이 없는 경우 기본값은 "false"이며 결과는 이벤트가 캡처되지 않습니다. 따라서 이 단계에서는 실제 값이 있는 이벤트만 호출되고 캡처됩니다. 후속 대상 단계에서는 값이 true 또는 false로 등록되었는지 여부에 관계없이 등록된 모든 리스너가 호출됩니다.
JavaScript의 DOM 이벤트 흐름
DOM 레벨 2는 이벤트 흐름 모델에 세 단계를 지정합니다.
- 이벤트 캡처 단계
- 목표에
- 이벤트 버블링 단계
원천
이벤트를 가로챌 기회가 있으면 이벤트 캡처가 먼저 발생합니다. 그 다음에는 이벤트를 받는 실제 대상이 이어집니다. 결국 이벤트 버블링 단계에서 이벤트에 대한 최종 응답이 발생합니다. 이전 섹션에서 설명한 예를 참조하여 <div> 요소를 클릭하면 위 다이어그램에 표시된 순서대로 'click' 이벤트가 발생합니다.
읽기: 인도의 전체 스택 개발자 급여
JavaScript에서 이벤트 버블링 및 이벤트 캡처 의 유틸리티
이벤트 버블링 단계에서는 플래그 값이 "false"인 이벤트(비캡처)만 호출됩니다. 이벤트 버블링 및 이벤트 캡처 는 DOM의 중요한 측면입니다.
el.addEventListener('Click', listener, false) // 리스너가 캡처하지 않음
el.addEventListener('Click', listener) // 리스너가 캡처하지 않음
위의 코드는 버블링 및 캡처 단계가 작동하는 방식을 보여줍니다. 모든 이벤트가 목표에 도달하지 않습니다. 일부 이벤트는 버블링되지 않고 대상 단계 이후에 중지됩니다. 버블링 이벤트는 모든 종류의 이벤트에 적용할 수 없으며 리스너는 e.target(이벤트 대상 참조) 및 e.eventPhase(현재 수신기가 이 모드에 등록됨).
결론
JavaScript의 이벤트 흐름에는 이벤트 캡처 단계, 대상 단계 및 이벤트 버블링 단계의 세 가지 중요한 단계가 있습니다. 이벤트 캡처는 필요한 경우 이벤트가 차단되는 가장 먼저 발생합니다. 그 다음에는 실제 목표에 도달하는 이벤트가 발생하며 이벤트에 대한 궁극적인 응답이 발생하는 마지막 단계는 버블링입니다. 따라서 JavaScript의 Event Bubbling 및 Event Capturing은 이벤트 핸들러와 이벤트 위임이 의존하는 기반이라고 적절하게 결론을 내릴 수 있습니다.
전체 스택에 대해 자세히 알아보려면 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 PG 디플로마를 확인하세요. 이 PG 디플로마는 일하는 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제, IIIT- B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.