본문 바로가기
Web/JavaScript

[JavaScript] 이벤트 전파(Event Propagation) - 방식, 전파 막는 방법

by coding-choonsik 2023. 4. 19.
728x90
반응형
SMALL

이벤트에 대해 자세히 알고싶다면? ⬇️⬇️⬇️

 

[JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener

1. 이벤트(Event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 자바스크립트는 비동기식 이벤

coding-yesung.tistory.com

1. 이벤트 전파(Event Propagation)

  • 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정
  • document 객체나 html 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남

2. 전파 방식


2-1. 버블링 전파방식

  • 자식에서 부모로 이벤트를 전파 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 전파</title>
    <style>
        #divBox { width: 100%; height: 300px; border: 3px solid red; }
        #pBox { width: 70%; height: 150px; border: 1px solid blue; }
        #spanBox { border: 3px solid gold; }
    </style>
    <script>
        window.onload = function(){
            // 버블링 전파방식
        	document.getElementById('divBox').addEventListener('click', clickDiv);
            document.getElementById('pBox').addEventListener('click', clickP);
            document.getElementById('spanBox').addEventListener('click', clickSpan);

  
            function clickDiv(e){
                document.getElementById('text').innerHTML += "<span style='color:red;'>div를 클릭했어요</span><br>";
            }
            function clickP(e){
                document.getElementById('text').innerHTML += "<span style='color:blue;'>P를 클릭했어요</span><br>";
            }
            function clickSpan(e){
                // e.stopPropagation();
                document.getElementById('text').innerHTML += "<span style='color:gold;'>span을 클릭했어요</span><br>";
            }
        }
    </script>
</head>
<body>
    <h2>이벤트 전파</h2>
    <div id="divBox">
        <p id="pBox">
            <span id="spanBox">
                클릭
            </span>
        </p>
    </div>
    <p id="text"></p>
</body>
</html>

2-2. 캡처링 전파방식

  • 부모에서 자식으로 이벤트를 전파
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 전파</title>
    <style>
        #divBox { width: 100%; height: 300px; border: 3px solid red; }
        #pBox { width: 70%; height: 150px; border: 1px solid blue; }
        #spanBox { border: 3px solid gold; }
    </style>
    <script>
        window.onload = function(){
              // 캡처링 전파방식
            document.getElementById('divBox').addEventListener('click', clickDiv, true);
            document.getElementById('pBox').addEventListener('click', clickP, true);
            document.getElementById('spanBox').addEventListener('click', clickSpan, true);

            function clickDiv(e){
                document.getElementById('text').innerHTML += "<span style='color:red;'>div를 클릭했어요</span><br>";
            }
            function clickP(e){
                document.getElementById('text').innerHTML += "<span style='color:blue;'>P를 클릭했어요</span><br>";
            }
            function clickSpan(e){
                // e.stopPropagation();
                document.getElementById('text').innerHTML += "<span style='color:gold;'>span을 클릭했어요</span><br>";
            }
        }
        
    </script>
</head>
<body>
    <h2>이벤트 전파</h2>
    <div id="divBox">
        <p id="pBox">
            <span id="spanBox">
                클릭
            </span>
        </p>
    </div>
    <p id="text"></p>
</body>
</html>

 

 

 

▲ span태그가 가장 마지막에 나옴(자식)

3. 이벤트 전파를 막는 방법

이벤트객체명.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 전파</title>
    <style>
        #divBox { width: 100%; height: 300px; border: 3px solid red; }
        #pBox { width: 70%; height: 150px; border: 1px solid blue; }
        #spanBox { border: 3px solid gold; }
    </style>
    <script>
        window.onload = function(){
        	// 캡처링 전파방식
            document.getElementById('divBox').addEventListener('click', clickDiv, true);
            document.getElementById('pBox').addEventListener('click', clickP, true);
            document.getElementById('spanBox').addEventListener('click', clickSpan, true);

            function clickDiv(e){
                document.getElementById('text').innerHTML += "<span style='color:red;'>div를 클릭했어요</span><br>";
            }
            function clickP(e){
                document.getElementById('text').innerHTML += "<span style='color:blue;'>P를 클릭했어요</span><br>";
            }
            function clickSpan(e){
                e.stopPropagation();   // span 태그의  전파 차단
            }
        }
        
    </script>
</head>
<body>
    <h2>이벤트 전파</h2>
    <div id="divBox">
        <p id="pBox">
            <span id="spanBox">
                클릭
            </span>
        </p>
    </div>
    <p id="text"></p>
</body>
</html>

 

 

▲ span태그(골드색)의 이벤트가 차단됨

 

 

728x90
반응형
LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 제네레이터(Generator)  (0) 2023.04.19
[JavaScript] 이터레이터(Iterator) & 이터러블(Iterable)  (0) 2023.04.19
[JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener), 이벤트 객체(Event Object)  (0) 2023.04.19
[JavaScript] URL & URI - 정의, 차이점, URL의 이스케이프 처리와 디코딩  (0) 2023.04.19
[JavaScript] wrapper class  (0) 2023.04.19

관련글

티스토리툴바