이벤트 전파(버블링/캡처링) --event.target // event.currentTarget

1)(버블링 (하위 ->상위)

2)캡처링 (상위 ->하위)

1. 캡처링이 먼저 발생하고 2.버블링이 그 다음에 발생

!!생각해보면 이벤트 전파는 어쩌면 당연한 현상일지도... 자식 요소가 부모 요소 영역 안에 위치하고 있기 때문에 자식 요소만을 클릭하였다 하더라도 다른 시각으로 보면 부모 요소도 클릭한 셈이 되기 때문.

여기서 lv3을 누르면(검은박스) --> 여긴 버블링이다 생각하자

event.target --이벤트가 발생한 지점

event.currentTarget --현재 실행되고 있는 녀석
this - 현재실행되는 녀석

curruntTarget(this) vs event.target

여기선 lv3을 찍었더니 버블링이 알아서 일어나서 3 2 1 container이렇게 내려가는거고

event.target.id는 lv3을 찍었으니 lv3이 뜨는데 4번뜨는건 버블링떄문에 그렇다 혼동ㄴㄴ

자세한건 아래꺼 보자

2)캡처링은 잘 안쓴다

뒤에 true

그럼 이제 나머지 버튼이벤트를 다 없애고 container만 남겨두자

이부분만 활성화하고 나머지는 다 주석처리하자

오호 부모에다가 (껍데기에다가) 버튼주면 안에꺼 클릭했을 때 어차피 부모 누른거과 같은 효과라 버튼이벤트가 동작하는구나

그럼 container박스(핑크)눌렀을 땐 결과 안나오게 하고 나머지는 결과가 나오게 해보자

짠~ container박스 아무리 클릭해도 안뜬다

계산기 만들 때 전부다 event주는거보다 부모에다가 주고 아래 자식들은 target.id로 값을 찾아가게 하면 될듯(참고하자)

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #wrap {
            width: 100%;
            /* height: 100vh; */
            display: grid;
            justify-content: center;
            border: 3px solid black;
            
        }
        #container {
            width: 400px;
            height: 400px;
            background-color: palevioletred;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }
        #lv1 {
            width: 300px;
            height: 300px;
            background-color: rgb(179, 94, 94);
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        #lv2 {
            width: 200px;
            height: 200px;
            background-color: rgba(47, 136, 114, 0.555);
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }   
        #lv3 {
            width: 100px;
            height: 100px;
            background-color: black;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function() {
            const container = document.querySelector("#container");
            const lv1 = document.querySelector("#lv1");
            const lv2 = document.querySelector("#lv2");
            const lv3 = document.querySelector("#lv3");

            // container.addEventListener("click", f);
            lv1.addEventListener("click", f1, true);
            lv1.addEventListener("click", f);
            lv2.addEventListener("click", f1, true);
            lv2.addEventListener("click", f);
            lv3.addEventListener("click", f1, true);
            lv3.addEventListener("click", f);
    
            function f(event) {
                // 이벤트가 발생한 지점 찍어주는 곳(event.target)
                //그 id는?
                // console.log(event.target.id);
                // console.log(event.currentTarget.id);
                console.log("버블링단계" + this.id + " | 이벤트발생 id-" + event.target.id);
            }

            function f1 (event) {
                console.log("캡처링" + this.id + " | 이벤트발생 id-" + event.target.id);
            }

        }

    </script>
</head>
<body>
    <div id="wrap">
        <div id="container">
            <div id="lv1">
                <div id="lv2">
                    <div id="lv3"></div>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'Javascript > 이론' 카테고리의 다른 글

createElement /createTextNode/appendChild/insertBefore/setAttribute/모달이 (0)	2023.06.02
form데이터 다루기/parentElement/ parentElement.remove() (0)	2023.06.02
css/js 링크 (0)	2023.05.31
addEventLisner (0)	2023.05.31
image경로 바꾸기 (0)	2023.05.30