[JavaScript] 이벤트 처리(전달, 전파) 방식 - 버블링, 캡쳐링

 

- 자바스크립트의 이벤트는 계층구조의 모든 요소에 전달됨

- 이벤트 핸들러가 설정되어있다면 모두 실행됨

 

 

* 버블링(Bubbling)

- 하위 -> 상부로 전달

 

 

* 캡쳐링(Capturing)

-  상부 -> 하부까지 전달

 

//-----------------------------------------------------------------------------

* a tag 클릭시 fucn1 함수만 실행하고 href에서 설정된 url address로 이동하지 않기 
<a href="address" onclick="func1(this, event)">onclick only</a>

function func1(link, event) {
  event.preventDefault();
}

 

//-----------------------------------------------------------------------------

//======================

< 이벤트 전달 막기 >

* event.preventDefault();

- 이벤트 전달(버블링[상부], 캡쳐링[하부])을 모두 막는다.

 

 

* event.stopImmediatePropagation()

- 같은 이벤트함수 호출을 막는다. 

- 이벤트 전달도 막는다. preventDefault() 기능 포함

- 위에 위치한 이벤트이 써야 해당 함수가 실행됨

- 아래에 위치한 함수에 쓰면 효과 없음

 

 

//=======================

//예제

 

<div id="myDiv1" style="background-color: orange; padding: 20px;">

            <h2>버블링(Bubbling): 이벤트가 상위로 전달됨</h2>

            <p id="myP1" style="background-color: white; padding: 20px">Click me!            

            </p>

            

        </div><br>

 

        <div id="myDiv2" style="background-color: orange; padding: 20px;">

            <h2>캡쳐링(Capturing): 이벤트가 하위로 전달됨</h2>

            <p id="myP2"  style="background-color: white; padding: 20px">Click me!</p>

        </div>        

    </div>

 

    <script>

 

        //==========================

        //버블링 : 위로 전달

        document.getElementById("myDiv1").addEventListener("click", function () { 

            console.log("오렌지(상부)");

            //event.stopPropagation(); //원래 최상위 이므로 의미 없음, 자신만 실행

        }, false);

 

        document.getElementById("myP1").addEventListener("click", function () {

            console.log("흰색(하부)-1");

            //event.stopPropagation(); //상위로 전달이 안됨, 자신만 실행                         

            //event.stopImmediatePropagation();//같은 이벤트함수 호출을 막는다. 이벤트 전달도 막는다.

                //위에 위치한 이벤트이 써야 해당 함수가 실행됨

                //아래에 위치한 함수에 쓰면 효과 없음

        }, false);

 

        document.getElementById("myP1").addEventListener("click", function () {

            console.log("흰색(하부)-2");

            //event.stopPropagation(); //상위로 전달이 안됨, 자신만 실행                         

            //event.stopImmediatePropagation();//아래에 위치한 함수에 쓰면 효과 없음, 둘다 실행됨

        }, false);

        

 

        //=======================

        //캡쳐링 : 아래로 전달

        document.getElementById("myDiv2").addEventListener("click", function () {

            console.log("오렌지(상부)"); //아래로 전달안됨  , 하부요소는 실행 안됨

            //event.stopPropagation();

        }, true);

 

        document.getElementById("myP2").addEventListener("click", function () {

            console.log("흰색(하부)");

            //event.stopPropagation(); //이미 최하부 이므로 , 아래로 전달을 막는 것은 의미 없음

                            //상부 stopPropagation()이 쓰이면 상부만 실행됨

        }, true);        

    </script>

 

 

//=================

//참고

 

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_usecapture

 

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/