JavaScript에서 이벤트 버블링과 캡처의 차이점
이 기사에서는 JavaScript에서 사용되는 이벤트 버블링 및 이벤트 캡처에 대해 설명합니다. 이 기사를 읽고 나면 JavaScript의 이벤트 버블링 및 캡처를 명확하게 이해하게 될 것입니다.
또한 이러한 이벤트 간의 차이점에 대해서도 논의할 것입니다. JavaScript에서 이벤트 버블링 및 캡처를 언제 사용해야 하는지 살펴보겠습니다.
JavaScript에서 이벤트 버블링 및 캡처는 브라우저가 중첩된 요소를 대상으로 하는 이벤트를 처리하는 방법의 단계를 설명합니다.
이 두 가지 사건을 하나씩 이해해 봅시다.
JavaScript의 이벤트 버블링
이벤트 버블링은 JavaScript에서 사용되는 이벤트 전파 방법입니다. 이벤트 버블링은 이벤트를 트리거하는 요소에서 시작하여 포함된 요소를 순서대로 버블링하는 프로세스입니다.
JavaScript의 이벤트 버블링을 사용하면 가장 안쪽 요소에서 먼저 이벤트를 캡처하고 처리한 다음 가장 바깥쪽 요소로 전파합니다.
이벤트 버블링의 원리는 매우 간단합니다. 이벤트가 다른 요소에서 발생하면 먼저 핸들러에서 실행된 다음 상위 요소에서 실행됩니다.
JavaScript의 중첩된 요소에서 이벤트가 전파되는 순서와 관련이 있습니다.
아래 차트를 통해 이벤트 버블링을 이해해 봅시다.
위의 이미지는 사용자가 버튼을 클릭할 때 이 순서대로 이벤트가 아래에서 위로 흐르는 것을 보여줍니다.
이제 예제 코드의 도움으로 이벤트 버블링을 이해해 봅시다.
보시다시피 부모와 자식이라는 두 개의 버튼을 만든 HTML 코드가 있습니다. 우리는 <div>에 parent 버튼을, <p>에 child 버튼을 저장했습니다.
아래 코드에서는 JavaScript를 사용했고, 스크립트에서는 .addEventListener 객체를 사용하여 버블링 이벤트를 수행했습니다.
이 코드를 실행하면 parent 및 child라는 두 가지 이벤트가 표시됩니다. 자식 이벤트는 가장 안쪽 요소이고 부모 이벤트는 가장 바깥쪽 요소입니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>
The Bubbling_Event in Javascript
</title>
</head>
<body>
<h2>The Bubbling_Event in Javascript</h2>
<div id="parent">
<button>
<h2>Parent</h2>
</button>
<button id="child">
<p>Child</p>
</button>
</div><br>
<script>
document.getElementById(
"child").addEventListener("click", function () {
alert("YOU CLICKED THE CHILD ELEMENT.");
}, false);
document.getElementById(
"parent").addEventListener("click", function () {
alert("YOU CLICKED THE PARENT ELEMENT.");
}, false);
</script>
</body>
</html>
코드 실행 후 출력:
부모 버튼을 클릭하면 다음과 같은 결과가 나타납니다.
하위 버튼을 클릭하면 다음과 같은 결과가 표시됩니다.
위의 예제 코드에서 이벤트 버블링에서 가장 안쪽 요소의 이벤트가 먼저 트리거된 다음 가장 바깥쪽 이벤트 요소를 따릅니다. <p> 요소가 먼저 처리된 다음 <div>가 처리됩니다.
그래서 JavaScript에서 가장 안쪽 요소를 처리해야 할 때 버블링 이벤트를 사용합니다.
위 예제 코드의 데모는 여기에서 확인하세요.
JavaScript의 이벤트 캡처
이벤트 캡처는 실제 코드에서 거의 사용되지 않지만 때때로 매우 유용할 수 있습니다. 이벤트 캡처는 이벤트 버블링의 반대입니다. 가장 바깥쪽 요소는 이벤트 캡처에서 첫 번째 대상이 됩니다.
JavaScript에서는 가장 바깥쪽 요소의 이벤트를 먼저 처리해야 할 때 이벤트 캡처를 사용합니다. 이벤트 캡처는 이벤트 버블링 이전에 수행되지만 이벤트 버블링은 JavaScript에서 이벤트 흐름을 처리하기에 충분하기 때문에 거의 사용되지 않습니다.
이벤트 캡처를 이해하기 위한 순서도는 다음과 같습니다. 이 이미지는 사용자가 버튼을 클릭하면 이벤트가 위에서 아래로 순서대로 흐르는 것을 보여줍니다.
이제 예제 코드를 통해 이벤트 캡처를 이해해 봅시다.
다음 코드에서 볼 수 있듯이 <div> 요소에 버튼을 만들었습니다. 이벤트 캡처를 수행하는 .addEventListener 개체를 사용한 다음 HTML 코드에서도 JavaScript를 사용했습니다.
이 코드를 실행하고 Click Me 버튼을 클릭하면 콘솔이 다음 출력을 생성합니다.
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>What is Event Capturing in JavaScript</title>
</head>
<body>
<div class="button-list">
<div class="button-container">
<button class="button"
onClick="console.log('Button!')">
Click Me
</button>
</div>
</div>
<script>
document.addEventListener("click", () =>
console.log('Event Capturing!'), true);
document.addEventListener("click", () =>
console.log('Event Bubbling!'), false);
</script>
</body>
</html>
코드 출력:
보시다시피 JavaScript의 이벤트 캡처를 사용하면 이벤트가 예상 순서대로 처리됩니다.
위 예제 코드의 데모는 여기에서 확인하세요.
이 두 이벤트의 주요 차이점은 이벤트 버블링은 가장 안쪽에서 가장 바깥쪽으로 이벤트를 먼저 처리하고 이벤트 캡처는 가장 바깥쪽 요소의 이벤트를 먼저 처리한다는 것입니다.
이 기사를 읽은 후 JavaScript에서 이벤트 버블링 및 캡처가 어떻게 작동하는지 보여주었기를 바랍니다.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn