27. Handling Click Events - 이벤트 핸들러

안녕하세요. 박기린 입니다.

홈페이지를 보면 수 많은 버튼들이 존재합니다. 버튼을 클릭하면, 그 버튼의 역할에 걸맞은 일이 나타납니다.

 

예를 들어 블로그의 카테고리 버튼을 클릭하면, 해당하는 카테고리의 글 목록이 담긴 페이지를 볼 수 있습니다.

이처럼 버튼에 어떠한 기능을 부여할 때, 그 기능에 대해서 'Event Handler'라고 부릅니다.

---

 

 

 

 

이벤트 핸들러(Event Handler)

이벤트 핸들러는 '어떠한 사건에 대한 동작을 다룬다'라는 의미를 가집니다.

위의 예시 또한 이벤트 핸들러입니다. 버튼을 누르면(사건) 어떠한 동작이 발생하므로, 이 모든 경우를 이벤트 핸들러라고 볼 수 있습니다.

 

"마우스로 카테고리 버튼을 클릭했다" - 사건

"카테고리 버튼을 클릭하면 카테고리 글 목록이 보인다." - 사건에 대한 동작

이 '사건'과 '사건에 대한 동작'을 묶은 것이 이벤트 핸들러입니다.

 

---

 

 

 

 

이벤트 핸들러 추가하기

자바스크립트에서 버튼과 같은 HTML Elements에 이벤트 핸들러를 추가하고 싶다면, addEventListener() 함수/메소드를 사용하면 됩니다.

EventTarget.addEventListener(action type, event handler)

action type : 어떤 사건을 Listen할 것인지 - String 타입

event handler : action type 동작을 Listen했을 때, 어떤 동작을 할 것인지 - function 타입

 

- action type으로 쓸 수 있는 String 목록은 [https://developer.mozilla.org/ko/docs/Web/Events]여기에서 확인할 수 있습니다.

- handler는 '특정 사건이 일어나는 것을 Listen 한 후 작동'하기 때문에 'Listener(리스너)'라고도 할 수 있습니다.

그래서 addEvent'Listener'함수를 이용해서 handler를 추가해줍니다.

 

 

 

예시 코드

document.querySelector('.check').addEventListener('click', function() {
    const item = document.querySelector('.item').value;
    
    if (!item) {
        document.querySelector('.message').textContent = '🛑 No item!';
    }
});

'check' 버튼을 눌렀을 때, 'item' 안에 value가 없을 경우 '🛑 No item!' 문구를 출력하는 이벤트 핸들러(리스너)를 추가했습니다.