[HTML/DOM] Event(이벤트)

이벤트

 

DOM을 다루다보면 이벤트를 다루는 게 핵심이라고 생각될 때가 많다. 다양한 이벤트들을 사용하다보면 이미 설정된 이벤트를 불러내서 사용하는 경우가 많은데, 이러한 방식이 겉으로는 편리하지만, 안에 내용물이 궁금해서 한 번 정리하고 싶어 이렇게 글을 쓰게 됐다.

 

이벤트가 무엇인지 알아보고, 이벤트를 처리하는 방법과 이벤트를 정의하는 방법에 대해 알아보자.

---

먼저 이벤트란 어떠한 사건의 발생을 의미한다. ex) 마우스 클릭, 사용자 버튼 입력 등

이벤트는 이미 정의된 표준 이벤트와 사용자가 정의하는 커스텀 이벤트로 나뉜다.

 

- 표준 이벤트(좌측 네이게이션에 Events 항목을 살펴보면 된다.)

- 커스텀 이벤트

 

표준 이벤트 항목을 살펴보고, 자기가 원하는 이벤트가 있을 경우엔, 표준 이벤트를 사용하고, 없으면 커스텀 이벤트를 통해 정의하면 되겠다.

---

다음으로 이벤트 처리 단계에 대해 알아보자.

 

이벤트 처리 단계 요약
- 생성 : 커스텀 이벤트(사용자 정의 이벤트,특정 용도 이벤트)에 한 함 . 통상, 미리 정의된 표준 이벤트를 사용 함 
- 작성 : 이벤트 발생시, 원하는 기능을 수행하는 이벤트 처리기를 작성
- 등록/지정 : 해당 요소의 이벤트 속성에 그에 상응하는 이벤트 처리기를 등록 지정
- 호출 : 특정 이벤트 발생시 지정된 이벤트 처리기가 호출됨

출처: 정보통신 기술용어 해설

이벤트를 생성했으면, 이제 해당 이벤트에 걸맞는 이벤트 처리기를 작성해야 한다.

이벤트 처리기의 경우, 이벤트 핸들러와 이벤트 리스너, 두 가지의 방식이 존재한다.

 

핸들러와 리스너를 언제 사용하는 지는 간단하다. 이벤트를 발생시키는 타겟이 이벤트를 하나만 처리할 것인지, 여러 이벤트를 처리하도록 할 것인지에 따라 맞춰서 사용하면 된다.

 

이벤트 핸들러의 경우, 하나의 요소가 하나의 이벤트만 처리하도록 설정이 가능하다.

연결 방식은 두 가지가 존재한다.

1. HTML 요소의 onxxxxx 속성에 등록하는 방법

    <button onclick="myFunction()">Click me</button> 

2. DOM 요소의 프로퍼티에 등록하는 방법

    target.onclick = functionRef(호출할 함수명)

 

이벤트 리스너의 경우, 하나의 요소가 여러 이벤트를 처리하도록 설정이 가능하며, 핸들러에 비해 좀 더 유연하게 사용이 가능하다.

연결방식은 다음과 같다.

target.addEventListener(type,콜백함수[,타깃팅종류])

- type : 이벤트 유형('click','mouseup'등)

- 콜백함수 : 이벤트 처리 내역

- 타깃팅종류 : true/false (true: 캡처링 단계. false: 버블링 단계/기본값)

 

핸들러와 리스너 중 사용목적에 맞게 이벤트 처리기를 작성한 다음, 이를 타겟에 등록시키면 이벤트 처리 설정이 끝이 난다.

---

마지막으로 EventTarget의 메서드에 알아보자.

EventTarget의 메서드에는 세 가지가 있다.

- addEventListener

- dispatchEvent

- removeEventListener

 

만약 새로운 이벤트를 만들고 싶으면 new CustomEvent으로 만들 수 있다. 

 

새로 만들어진 이벤트의 경우, 실행시킬 방법이 없기 때문에, dispatchEvent 메서드를 사용하여 실행시키도록 한다.