[TCP School/자바스크립트] 이벤트 - 이벤트 리스너 호출

이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출한다.

이 때 이벤트 리스너는 인수로 이벤트 객체를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조한다.

---

이벤트 객체

이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있다.

모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다.

이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달된다.

 

<button id='btn' style='width: 150px; border: 1px solid black; background-color: yellow;'>버튼 클릭</button>
<p id='text'></p>

<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click', clickBtn);
    
    function clickBtn(event) {
        document.getElementById('text').innerHTML = '이 이벤트 타입은 ' + event.type + '이며, 이벤트의 대상은 ' + event.target + '입니다.';
    }
</script>

---

이벤트 호출 순서

addEventListener() 메소드를 사용하면 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.

이 때 특정 타입의 이벤트가 발생하면 브라우저는 다음과 같은 순서로 이벤트를 호출하게 된다.

 

1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록한 이벤트 리스너를 가장 먼저 호출

2. 그 후 addEventListener() 메소드를 사용하여 등록한 이벤트 리스너를 등록한 순서대로 호출

---

이벤트 전파(event propagation)

이벤트 전파란 이벤트가 발생했을 때, 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 의미한다.

 

이벤트의 대상이 window 객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않는다.

하지만 document 객체나 HTML 문서의 요소에서 이벤트가 일어나면 대상 요소를 결정하기 위해 이벤트의 전파가 일어난다.

 

이벤트의 전파 방식은 크게 다음은 두 가지 방식으로 구분된다.

1. 버블링(bubbling) 전파 방식

2. 캡쳐링(capturing) 전파 방식

---

버블링 전파 방식

버블링 전파 방식은 이벤트가 발생한 요소부터 시작해서, DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식이다.

 

이 전파 방식은 해당 요소의 리스너가 실행된 후, 그 부모 요소에 등록된 리스너가 실행되고, 또다시 그 부모 요소에 등록된 리스너가 실행된다.

 

이러한 이벤트의 전파는 document 객체뿐만 아니라 가장 마지막에는 window 객체까지 계속 이어진다.

 

박스 안의 빈 공간 클릭

<div id='divBox' style='width: 50%; height: 100px; border: 1px solid red;'>
    <p id='pBox' style='width: 40%; height: 50px; border: 1px solid orange;'>박스 안의 빈 공간 <span id='sBox' style='border: 1px solid green;'>클릭</span></p>
</div>
<p id='text'></p>

<script>
     document.getElementById('divBox').addEventListener('click', clickDiv);
     document.getElementById('pBox').addEventListener('click', clickP);
     document.getElementById('sBox').addEventListener('click', clickS);
     
     function clickDiv() {
         document.getElementById('text').innerHTML += 'div 요소 클릭' + '<br>';
     }
     
     function clickP() {
         document.getElementById('text').innerHTML += 'p 요소 클릭' + '<br>';
     }
     
     function clickS() {
         document.getElementById('text').innerHTML += 'span 요소 클릭' + '<br>';
     }
</script>

---

캡쳐링 전파 방식

캡쳐링 전파 방식은 이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면서 전파되는 방식이다.

 

이 전파 방식은 가장 먼저 window 객체의 리스너가 실행된 후, document 객체의 등록된 리스너가 실행되고, 또다시 그 자식 요소에 등록된 리스너가 실행된다.

이러한 이벤트의 전파는 이벤트가 발생한 요소까지 이어진다.

 

이 전파 방식을 사용하기 위해서는 addEventListener() 메소드의 세 번째 인수에 true를 전달하면 된다.

 

캡쳐링 전파 방식은 실제 이벤트의 대상이 되는 요소에 이벤트가 전달되기 전에 상위 요소에 등록된 이벤트 리스너가 이를 가로채거나 잡아낼 수 있다.

이렇게 이벤트를 걸러내어 해당 이벤트 리스너가 호출되지 않게 하는 기법을 이벤트 취소 기법이라고 한다.

 

박스 안의 빈 공간 클릭

<div id='divBox' style='width: 50%; height: 100px; border: 1px solid red;'>
    <p id='pBox' style='width: 40%; height: 50px; border: 1px solid orange;'>박스 안의 빈 공간 <span id='sBox2' style='border: 1px solid green;'>클릭</span></p>
</div>
<p id='text'></p>

<script>
     document.getElementById('divBox').addEventListener('click', clickDiv, true);
     document.getElementById('pBox').addEventListener('click', clickP, true);
     document.getElementById('sBox').addEventListener('click', clickS, true);
     
     function clickDiv() {
         document.getElementById('text').innerHTML += 'div 요소 클릭' + '<br>';
     }
     
     function clickP() {
         document.getElementById('text').innerHTML += 'p 요소 클릭' + '<br>';
     }
     
     function clickS() {
         document.getElementById('text').innerHTML += 'span 요소 클릭' + '<br>';
     }
</script>

---

이벤트 기본 동작의 취소

HTML <a>요소에 클릭 이벤트가 발생하면 브라우저는 지정된 주소를 따라가 새로운 웹 페이지를 열게 된다.

이렇게 특정 이벤트는 미리 지정된 기본 동작을 가진다.

하지만 preventDefault() 메소드나 returnValue 프로퍼티를 이용하면, 이러한 기본 동작의 실행을 취소할 수 있다.

 

박스 안의 빈 공간 클릭

<div id='divBox' style='width: 50%; height: 100px; border: 1px solid red;'>
    <p id='pBox' style='width: 40%; height: 50px; border: 1px solid orange;'>박스 안의 빈 공간 <a id='lBox' href='#'>클릭</a></p>
</div>
<p id='text'></p>

<script>
     document.getElementById('divBox').addEventListener('click', clickDiv);
     document.getElementById('pBox').addEventListener('click', clickP);
     document.getElementById('lBox').addEventListener('click', clickL);
     
     function clickDiv() {
         document.getElementById('text').innerHTML += 'div 요소 클릭' + '<br>';
     }
     
     function clickP() {
         document.getElementById('text').innerHTML += 'p 요소 클릭' + '<br>';
     }
     
     function clickL(event) {
         event.preventDefault();
         document.getElementById('text').innerHTML += '링크의 기본 동작 취소<br>';
         document.getElementById('text').innerHTML += 'a 요소 클릭' + '<br>';
     }
</script>

---

이벤트 전파의 취소

stopPropagation() 메소드나 cancelBubble 프로퍼티를 이용하면, 이벤트의 전파를 취소할 수 있다.

 

박스 안의 빈 공간 클릭

<div id='divBox' style='width: 50%; height: 100px; border: 1px solid red;'>
    <p id='pBox' style='width: 40%; height: 50px; border: 1px solid orange;'>박스 안의 빈 공간 <a id='lBox' href='#'>클릭</a></p>
</div>
<p id='text'></p>

<script>
     document.getElementById('divBox').addEventListener('click', clickDiv);
     document.getElementById('pBox').addEventListener('click', clickP);
     document.getElementById('lBox').addEventListener('click', clickL);
     
     function clickDiv() {
         document.getElementById('text').innerHTML += 'div 요소 클릭' + '<br>';
     }
     
     function clickP() {
         document.getElementById('text').innerHTML += 'p 요소 클릭' + '<br>';
     }
     
     function clickL(event) {
         event.preventDefault();
         document.getElementById('text').innerHTML += '링크의 기본 동작 취소<br>';
         event.stopPropagation();
         document.getElementById('text').innerHTML += '이벤트 전파 취소' + '<br>';
     }
</script>

---

TCP School의 강의 내용을 정리한 포스트입니다.

http://www.tcpschool.com/javascript/intro

코딩교육 티씨피스쿨