파카

이벤트 시스템, 이벤트 위임 본문

프로그래밍/Javascript

이벤트 시스템, 이벤트 위임

Anphaca 2021. 12. 29. 14:48
이벤트 시스템이란 ?
DOM을 통해 코드로 특정하지 못하는 상태를 특정하고 활용하는 것을 말한다

 

여기에는 아래 2가지 개념이 있다.

// Bubbling
// 안쪽에 있는 요소에서 이벤트가 발생했을 때 밖으로 확산되어 나가는 것
// 이벤트가 발생한곳에서 이벤트 리스너가 있는 곳으로 상위계층으로 찾아가는 이벤트 버블링
 
// Capturing
// 이벤트가 발생했을 경우, 이벤트가 발생한 곳으로 하위계층으로 찾아 들어가는 이벤트 캡처링

 

캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현할 수 있다.

 

코드를 통해 실습해보자

HTML 코드 

더보기 
<!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>Event Bubbling, Capturing</title>
    <style>
        body { padding:50px; }
        .box1 { padding:50px; background:red; }
        .box2 { padding:50px; background:blue; }
        .box3 { padding:50px; background:yellow; }
    </style>
</head>
<body>
    <div class="box1" data-name="red">
        <div class="box2" data-name="blue">
            <div class="box3" data-name="yellow">

            </div>
        </div>
    </div>
    <script src="EventSystem.js" type="module"></script>
</body>
</html>

HTML을 div내에 영역을 분리해서 클릭이벤트를 확인해보고자 한다.

아래 예제를 통해 콘솔을 보면서 이해해보자

function main() {
    console.log("Run ")
    const BUBBLING_PHASE = false;
    const CAPTURING_PHASE = false;
    const PHASE_NAME = ["NONE", "CAPTURING", "TARGET", "BUBBLING"];

    function eventLogger({ target, currentTarget, eventPhase }) {
        console.log(`${target.dataset.name}, ${currentTarget.dataset.name}, ${PHASE_NAME[eventPhase]}`);
    }

    let divs = document.querySelectorAll("div");
    // 이벤트리스너 인자
    // 이벤트, 이벤트핸들러, 이벤트가 중첩되었을 때 어떻게 전파하는지에 대한 옵션
    divs.forEach(div => div.addEventListener("click", eventLogger, BUBBLING_PHASE));
}

document.addEventListener("DOMContentLoaded", main);

 

아래 모던자바스크립트에 다양한 예제와 상세한 설명이 있다.

 

출처 

: https://ko.javascript.info/event-delegation

 

이벤트 위임

 

ko.javascript.info

 

'프로그래밍 > Javascript' 카테고리의 다른 글

클로저, 생성기 함수란 ?  (0) 2021.12.21
JS, aync, await  (0) 2021.12.11
JS, promise  (0) 2021.12.10
JS, 비동기 처리와 콜백함수  (0) 2021.12.09
일급함수, 일급객체란 ?  (0) 2021.12.08
'프로그래밍/Javascript' Related Articles more
Comments