[JavaScript30] ☁️ 25. Event Capture, Propagation, Bubbling and Once

16439 단어 JavaScriptjavascript30JavaScript

☁️ 25. Event Capture, Propagation, Bubbling and Once

Event Capture, Propagation, Event Bubbling, Once에 대해 알아보자.

초기 코드

<!DOCTYPE html>
<html lang="ko">
<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>Understanding JavaScript's Capture</title>
</head>
<body class="bod">
    <div class="one">
        <div class="two">
            <div class="three">
                
            </div>
        </div>
    </div>
    <style>
        html{
            box-sizing:border-box;
        }
        *, *:before, *:after{
            box-sizing:inherit;
        }
        div{
            width: 100%;
            padding:100px;
        }
        .one {
            background: thistle;
        }
    
        .two {
            background: mistyrose;
        }
    
        .three {
            background: coral;
        }
    </style>
    <button></button>
    <script>s</script>
</body>
</html>

초기 화면

🌏 새로 알게 된 것

Event Bubbling과 Event Captureing

이벤트는 타겟 엘리먼트를 포함한 부모 요소에도 영향을 미치기 때문에 자식요소를 포함하는 부모요소에 이벤트리스너를 지정하여 관리한다.

즉, 부모 요소에 위임을 한다.
이벤트를 관리하는 방법으로 아래 두가지 방법이 있다.

Event Bubbling : 자식 이벤트가 부모에게 전파되는 것

Event Capturing : 부모 이벤트가 자식에게 전파되는 것.

👉 Propagation(중단)

이벤트의 버블링을 막기 위해 사용. event.stopPropagation()

👉 Once(1회 실행)

이벤트를 1회만 실행 시킴.

🌏 과정

const divs = document.querySelectorAll('div');
const button = document.querySelectorAll('button');
function logText(e){
    console.log(this.classList.value);
    // e.stopPropagation(); // stop Bubbling!

    // console.log(this);
}

// document.body.addEventListener('click',logText);

divs.forEach(div => div.addEventListener('click', logText,{
    capture: false,
    once: true
}));

button.addEventListener('click',()=>{
    console.log('Click!!');
},{
	once:true
})

👉 1. Bubbling

const divs = document.querySelectorAll('div');

function logText(e){
    console.log(this.classList.value);
}

👉 2. Capture

divs.forEach(div => div.addEventListener('click', logText,{
    capture: true,
}));

👉 3. Stop Bubbling

버블링을 stopPropagation을 통해 멈춘다.

function logText(e){
    console.log(this.classList.value);
   	e.stopPropagation(); // stop Bubbling!

    // console.log(this);
}

👉 4. Once

한번만 동작시킴.

divs.forEach(div => div.addEventListener('click', logText,{
    capture: false,
    once: true
}));
[Level up] 데이터 실습(3) - JSON
네트워크 프로그래밍03 주소체계와 데이터 정렬

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage