English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이벤트 전파는 웹 브라우저에서 이벤트 "스택"을 트리거하는 방법을 설명하는 것입니다.
이벤트버블과캡처이벤트 전파의 두 가지 메커니즘입니다. 이들은 동일한 이벤트 유형이 두 가지 처리 프로그램에 의해 활성화될 때 발생하는 상황을 설명합니다.
고정된<div >요소 내에 있습니다.<p>요소를 클릭했습니다.<p>요소를 처리해야 할지 알아야 합니다.
<div id="div"1">Capturing"
<p id="p"1">Click me<"/p>"
</div>"
<script>
document.querySelector("#div"1document.querySelector("#p")
document.querySelector("#p1document.querySelector("#p")
</script>테스트를 보세요‹/›를 통해, 이벤트는 가장 외층 요소에서 먼저 캡처되어 내층 요소로 전파됩니다.).addEventListener("click", myFunc, true);capture(캡처)
를 통해, 이벤트는 가장 외층 요소에서 먼저 캡처되어 내층 요소로 전파됩니다.버블를 통해, 이벤트는 가장 내층 요소에서 먼저 캡처되고 처리되어 그 다음 외층 요소로 전파됩니다.
이를 사용하면addEventListener()메서드를 사용하여 " useCapture 이 파라미터는传播 유형을 지정하며, 아래 문법 항목에서 useCapture에 대한 자세한 설명을 제공합니다.
element.addEventListener(event, listener, useCapture)
default 값은 false로, 버블传播을 기본으로 사용합니다; 그리고 값을 true로 설정하면 이벤트가 캡처传播을 사용합니다.
이벤트传播 개념이 도입된 것은, DOM层次구조에서 부모와 자식 관계를 가진 여러 요소가 동일한 이벤트에 대한 이벤트 처리기를 가지고 있는 경우(예: 마우스 클릭)를 처리하기 위함입니다. 현재 문제는, 사용자가 내부 요소를 클릭할 때, 어떤 요소의 click 이벤트가 먼저 처리되는지, 즉 외부 요소의 click 이벤트나 내부 요소의 click 이벤트인지입니다.
부모 요소가 있는 요소에서 이벤트가 트리거될 때(예: 이 예제에서의)<p>에서, 브라우저는 두 가지 다른 단계를 실행합니다-캡처 단계와 버블 단계.
에서캡처단계:
브라우저는 요소의 가장 외측 부모 요소(<html>에서 onclick 이벤트 처리기를 캡처 단계에 등록했는지 확인하고, 그렇다면 이벤트 처리기를 실행합니다.
그런 다음, 그것은 이동합니다.<html>에서의 다음 요소로 이동하고 같은 작업을 수행한 후 다음 요소로 이동하고, 이를 계속 통해 실제 클릭한 요소에 도달할 때까지 이어집니다.
에서버블단계에서는 정반대로:
브라우저는 버블 단계에서 실제 클릭한 요소가 그 위에 등록된 onclick 이벤트 처리기를 확인하고, 그렇다면 이벤트 처리기를 실행합니다.
그런 다음, 그것은 다음 직접 부모 요소로 이동하고, 그 다음을 실행하고, 이를 계속 통해 타겟에 도달할 때까지 이어집니다.<html>요소까지.
주요 브라우저에서, 기본적으로 모든 이벤트 처리자가 버블 단계에 등록됩니다.
캡처 단계에서, 이벤트는 윈도우에서 DOM 트리를 통해 타겟 노드로传播됩니다.
document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);테스트를 보세요‹/›제한 조건은addEventListener()세 번째 매개변수를 true로 설정하면 이벤트 캡처가 등록된 이벤트 처리기와 함께 사용됩니다.
버블링 단계에서는 반대입니다. 이 단계에서, 이벤트는 목표 요소에서 Window까지 DOM 트리를 상승 방향으로 전파되거나 버블됩니다.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);테스트를 보세요‹/›모든 브라우저가 이벤트 버블링을 지원하며, 이벤트 버블링은 모든 처리기에 적용됩니다. 그들은 어떻게 등록되었든지 관계없이(예: onclick 또는 addEventListener()를 사용하여 등록된 경우)
event.stopPropagation() 메서드를 사용하여 어떤 조상 요소의 이벤트 처리기를 알리지 않도록 방지하려면, 중간에서 이벤트 전파를 중단할 수도 있습니다.
다음 예제에서, 자식 요소를 클릭하면 부모 요소의 click 이벤트 리스너가 실행되지 않습니다:
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("You clicked: ");+ this.tagName);
event.stopPropagation();
}테스트를 보세요‹/›목표 요소는 생성된 이벤트의 DOM 노드입니다.
예를 들어, 사용자가 슈퍼 링크를 클릭하면 목표 요소는 슈퍼 링크입니다.
목표 요소의 접근 방식은 event.target로, 이벤트 전파 단계에서 변경되지 않습니다.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("target = "); + event.target.tagName);
}테스트를 보세요‹/›일부 이벤트는 관련된 기본 작업이 있습니다. 예를 들어, 링크를 클릭하면 브라우저가 링크의 목표로 이동하며, 양식 제출 버튼을 클릭하면 브라우저가 양식을 제출하는 등입니다. 이러한 기본 작업을 방지하려면 event.preventDefault() 이벤트 객체 메서드를 사용할 수 있습니다.
function myFunc() {
event.preventDefault();
}테스트를 보세요‹/›그러나 기본 작업을 방지하더라도 이벤트 전파를 방지할 수 없습니다; 이벤트는 일반적으로 DOM 트리로 전파됩니다.
버블링은 이벤트 위임을 활용할 수 있게 합니다.
이벤트 위임은 특정 노드에 이벤트 리스너를 추가하는 대신 부모 객체에 이벤트 리스너를 추가할 수 있게 합니다.
이 개념은 다음 사실에 기반합니다: 많은 자식 요소 중 하나를 클릭했을 때 특정 코드를 실행하려면 부모 요소에 이벤트 리스너를 설정하고 이벤트가 자식 요소에서 부모 요소로冒泡되도록 하여, 각 자식 요소에 대한 이벤트 리스너를 별도로 설정할 필요가 없습니다.
이 예제에서, 클릭 시 메시지를弹出하려면, 부모 요소에 클릭 이벤트 리스너를 설정할 수 있습니다.<ul>위에 클릭 이벤트 리스너를 설정하면, 목록 항목이弹出
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
if(event.target && event.target.nodeName == "LI") {
alert("List item " + event.target.id.replace("post-", "") + " was clicked!");
}
});
</script>테스트를 보세요‹/›