1. 이벤트 핸들러 등록하기

이벤트 핸들러는 특정한 이벤트가 발생했을 때 실행되는 함수입니다. 자바스크립트에서는 다음과 같은 방법으로 이벤트 핸들러를 등록할 수 있습니다.

HTML 요소에 직접 등록하기

<button onclick="myFunction()">클릭</button>

이렇게 HTML 요소의 onclick 속성에 직접 함수 이름을 등록할 수 있습니다.

addEventListener() 함수 사용하기

var button = document.querySelector('button');
button.addEventListener('click', myFunction);

addEventListener() 함수를 사용하여 이벤트 핸들러를 등록할 수도 있습니다. 이 함수는 이벤트 타입과 핸들러 함수를 인자로 받습니다.

2. 이벤트 핸들러 제거하기

이벤트 핸들러를 등록한 후에는 필요한 경우에 이를 제거할 수 있습니다. 다음은 이벤트 핸들러를 제거하는 방법입니다.

removeEventListener() 함수 사용하기

button.removeEventListener('click', myFunction);

removeEventListener() 함수를 사용하여 등록된 이벤트 핸들러를 제거할 수 있습니다. 이 함수는 등록할 때와 동일한 이벤트 타입과 핸들러 함수를 인자로 받습니다.

3. 주의사항

• 이벤트 핸들러 등록 시에는 핸들러 함수 이름을 인자로 전달하므로 함수 이름에는 괄호 ()를 붙이지 않아야 합니다.
• 이벤트 핸들러 함수 내부에서는 this 키워드를 사용할 수 있으며, 이는 이벤트가 발생한 요소를 가리킵니다.
• addEventListener() 함수를 사용하여 등록한 이벤트 핸들러는 여러 개 등록할 수 있습니다. 이 경우, 등록 순서에 따라 실행됩니다.

참고 자료

• MDN Web Docs - 이벤트 핸들러 등록하기
• MDN Web Docs - 이벤트 핸들러 제거하기