[Javascript] 이벤트 추가 바로 알기

 

 

이벤트(event)란 웹 페이지에서 발생하는 상호작용을 말한다. 웹 페이지에서 '무언가 일어났다'는 일종의 신호 같은 것이다. 우리가 사용하는 웹 애플리케이션에서는 수많은 이벤트가 발생한다. 사용자가 마우스나 키보드를 이용해 일으킬 수 있는 이벤트도 있고 브라우저 스스로 웹 페이지를 로딩하며 여러 이벤트를 발생하기도 한다.

 

 

자바스크립트에서 이벤트를 다룰 땐 이벤트 핸들러를 사용한다. 이벤트 핸들러란 어떤 이벤트가 발생했을 때 실행되는 함수를 말한다. 사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 일어날 것인지 정의해 주는 것이다.

 

 

 

---

 

 

<button>클릭하세요!</button>

 

여기 버튼이 하나 있다. 여기에 이벤트를 등록하는 방법에는 세 가지가 있다.

 

 

 

1. 인라인(inline) 방식

 

가장 고전적이면서도 사용하기 간단한 방법이다. HTML 요소에서 발생하는 이벤트를 처리하는 가장 쉬운 방법은 HTML 요소의 이벤트 속성을 활용하는 것이다.  on[이벤트 타입명]  형태를 갖는 이벤트 속성(ex. onclick, onchange...)은 HTML의 모든 요소에서 사용 가능하며, 해당 타입의 이벤트 발생 시 실행할 이벤트 핸들러를 속성 값으로 설정해 줄 수 있다.

 

<!-- 1 -->
<button onclick="alert('click!')">클릭하세요!</button>

<!-- 2 -->
<button onclick="fnClick()">클릭하세요!</button>

 

이러한 방법으로 이벤트를 추가하면 코딩하기 쉽다는 장점이 있지만 HTML 코드에 Javascript 코드가 들어가면서 깔끔하지 못하면서도 분석하기 어려운 코드를 만들고, 관리하기 어려워진다는 단점이 있다. 이와 같은 이유로 MDN에서는 인라인 방식을 사용하지 말라고 명시해놨을 정도. 또한 지금 예시에서는 버튼이 하나지만 만약 버튼이 100개라면? 100개 모두 인라인 방식으로 추가해야 한다. 그리고 수정된다면 수정도 100번...

 

 

---

 

 

2. 프로퍼티(property) 방식

 

이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식.

<button>클릭하세요!</button>

<script>
    let myButton = document.querySelector('button');
    myButton.onclick = () => alert('click!');
    myButton.onclick = () => alert('click 2!');
</script>

 

HTML과 Javascript 코드를 분리할 수 있다는 점에서 인라인 방식의 단점을 보완했다고는 할 수 있지만, 하나의 이벤트 프로퍼티에는 하나의 이벤트 핸들러 바인딩만 가능하다는 단점이 있다. 즉 한 이벤트에 대해 두 개 이상의 핸들러를 추가할 수 없게 된다. 따라서 위 코드를 실행하면 두 번째 핸들러의 내용인 "click 2!"만 실행된다. 결국 이 방법도 권장되는 방법은 아니다.

 

 

---

 

 

3. 이벤트리스너 방식

 

// addEventListener() 사용 방법
target.addEventListener('type', listener(e), useCapture);

 

자바스크립트에서 이벤트를 동적으로 처리하는 방식. addEventListener()를 이용해 이벤트를 대상 요소에 연결하고, 이에 따라 실행될 이벤트 핸들러를 전달한다. target은 이벤트를 등록할 대상 요소, type은 이벤트 타입, listener는 등록할 이벤트 핸들러, useCapture는 이벤트 단계 중 캡처링 단기 실행 여부(true/false)에 해당한다.

 

이벤트리스너 방식을 사용하면 여러 개의 이벤트 핸들러를 추가할 수 있고 이벤트 전파도 제어할 수 있다. 이러한 이벤트리스너는 모든 DOM 노드에 등록할 수 있다. 따라서 아래의 코드를 실행하면 "click!"과 "click 2!"가 순서대로 출력된다.

cf) IE9 이상에서 동작하며 IE8 이하에서는 attachEvent()를 사용.

<button>클릭하세요!</button>

<script>
    let myButton = document.querySelector('button');
    myButton.addEventListener('click', () => {
    	alert('click!')
    });
    myButton.addEventListener('click', () => {
    	alert('click 2!')
    });
</script>