[Javascript] 이벤트 핸들러 등록

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킵니다. 예를 들면, 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킵니다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 합니다.

이벤트 타입

이벤트 타입은 이벤트의 종류를 나타내는 문자열립니다. 이벤트 타입은 약 200여 가지가 있지만 사용 빈도가 높은 이벤트 몇개만 정리해보겠습니다.

타입	이벤트 타입	이벤트 발생 시점
마우스	click	마우스 버튼을 클릭했을 때
마우스	mousedown	마우스 버튼을 눌렀을 때
마우스	mouseup	누르고 있던 마우스 버튼을 놓았을 때
마우스	mousemove	마우스 커서를 움직였을 때
키보드	keydown	키를 눌렀을 때
키보드	keyup	누르고 있던 키를 놓았을 때
폼	submit	form 요소 내의 submit 버튼을 클릭했을 때
값 변경	input	input, select, textarea 요소의 값이 입력되었을 때
값 변경	change	input, select, textarea 요소의 값이 변경되었을 때

이벤트 핸들러 등록

이벤트 핸들러는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수입니다. 즉, 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러입니다.

이벤트 핸들러 어트리뷰트 방식

이 방식의 이름은 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있습니다.

<button onClick="print('Hello')">Click</button>
<script>
	function print(text) {
    console.log(`${text} World!`);
    }
</script>

이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미합니다. 즉, 어트리뷰트는 파싱되어 함수를 암묵적으로 생성하고, 이벤트 핸들러 어트리뷰트 이름과 동일한 키 onclick 이벤트 핸들러 프로퍼티에 할당합니다.

이벤트 핸들러 프로퍼티 방식

이벤트 핸들러 프로퍼티의 키는 이벤트 핸들러 어트리뷰트와 마찬가지로 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있습니다. 이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록됩니다.

<button>Click</button>
<script>
	const button = document.querySelector('button');
    // 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩
    button.onclick = function() {
      console.log('button click!);
	}
</script>

이벤트 핸들러를 등록하기 위해서는 이벤트를 발생시킬 객체인 이벤트 타킷과 이벤트의 종류를 나타내는 문자열인 이벤트 타입 그리고 이벤트 핸들러를 지정할 필요가 있습니다.

addEventListener 매서드 방식

EventTarget.addEventListener('eventType', functionName, [useCapture]);

• EventTarget : 이벤트 타킷
• eventType : 이벤트 타입. on 접두사를 붙이지 않는다.
• functionName : 이벤트 핸들러
• useCapture : capture 사용 여부(false:bubbling가 기본값)

이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩하지만 addEventListener 메서드에는 이벤트 핸들러를 인수로 전달합니다.

<button>Click</button>
<script>
	const button = document.querySelector('button');
    button.addEventListener('click', function() {
      console.log('button click!');
    });
</script>

이벤트 핸들러 제거

addEventListener 매서드로 등록한 이벤트 핸들러를 제거하려면 removeEventListener 매서드를 사용합니다. removeEventListener 매서드에 전달할 인수는 addEventListener 메서드와 동일합니다. 두 메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않습니다.

---

✅ 참고

• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events
• 모던 자바스크립트 Deep Dive