자바스크립트 - 버블링, 캡쳐링의 활용과 이벤트 위임

ksge7 2020. 10. 20. 12:05

버블링과 캡쳐링에 대해서 이미 정리한 내용이 있다.

그런데 어째서 이 버블링과 캡쳐링을 써야 하는지 의문이 들때가 있다.

실제 예시가 없으면 왜 필요한지 알 수 없기 때문이다.

우선 가장 간단하게 알 수 있는 이벤트 위임(event delegation)을 통해 알아보자.

<body>

    <div id="div">
        <button id = "1번"> 1번 버튼 </button><br><br>
        <button id = "2번"> 2번 버튼 </button><br><br>
        <button id = "3번"> 3번 버튼 </button><br><br>
        <button id = "4번"> 4번 버튼 </button><br><br>
        <button id = "5번"> 5번 버튼 </button><br><br>
    </div>
    
    <button> div 밖의 버튼 </button>
    
</body>
</html>

위와 같은 코드가 있다고 생각해보자.

만약 5개의 버튼에 기능을 준다고 생각해보자. 기존 방법을 쓰면 다음과 같이 해야한다.

<body>

    <div id="div">
    
        <button id = "1번"> 1번 버튼 </button><br><br>
        <button id = "2번"> 2번 버튼 </button><br><br>
        <button id = "3번"> 3번 버튼 </button><br><br>
        <button id = "4번"> 4번 버튼 </button><br><br>
        <button id = "5번"> 5번 버튼 </button><br><br>
        
    </div>
    
    <button> div 밖의 버튼 </button>
    
</body>

<script>

    let no1 = document.getElementById('1번').addEventListener('click', function(e){ console.log(e.target) });
    let no2 = document.getElementById('2번').addEventListener('click', function(e){ console.log(e.target) });
    let no3 = document.getElementById('3번').addEventListener('click', function(e){ console.log(e.target) });
    let no4 = document.getElementById('4번').addEventListener('click', function(e){ console.log(e.target) });
    let no5 = document.getElementById('5번').addEventListener('click', function(e){ console.log(e.target) });
    
</script>

5개의 버튼을 이용하려면 5개의 객체를 만들고 일일이 이벤트 리스너 메서드를 지정해줘야 했다.

하지만 이벤트 캡쳐링을 이용하면 이를 쉽게 극복할 수 있다.

<body>

    <div id="div">
    
        <button id = "1번"> 1번 버튼 </button><br><br>
        <button id = "2번"> 2번 버튼 </button><br><br>
        <button id = "3번"> 3번 버튼 </button><br><br>
        <button id = "4번"> 4번 버튼 </button><br><br>
        <button id = "5번"> 5번 버튼 </button><br><br>
        
    </div>
    
    <button> div 밖의 버튼 </button>
    
</body>

<script>

    let div = document.getElementById('div').addEventListener('click', function(e){ console.log(e.target) });
    
</script>

버튼의 상위 노드인 <div>에 이벤트 핸들러 메서드를 부여하면 캡쳐링에 따라 그 아래도 영향을 받는다.

이렇게하면 위와 똑같이 기능을 하면서도 코드를 획기적으로 줄일 수 있다.

이는 캡쳐링에 따라 상위에서 하위 노드로 이벤트가 전파 된 것으로 볼 수 있다.

그리고 이러한 방식의 이벤트 실행을 이벤트 위임(evnet delegation)이라 한다.