JavaScript 자바스크립트 이벤트 핸들러 (EventHandler)

이벤트 핸들러란?

이벤트 핸들러는 사용자의 입력, 마우스 움직임, 키보드 조작 등의 다양한 이벤트에 반응하여 실행되는 함수입니다. 이는 사용자와 웹 페이지 간의 상호작용을 가능하게 하며, 웹사이트의 동적 기능을 구현하는 데 중요한 역할을 합니다.

이벤트 핸들러의 특징

인라인 이벤트 핸들러: HTML 요소 내에 직접 작성되는 방식입니다. 간편하지만, HTML과 자바스크립트 코드가 혼합되어 유지보수가 어렵고, 이벤트 리스너를 한 번에 하나만 할당할 수 있는 단점이 있습니다.
속성을 이용한 이벤트 핸들러: DOM 요소의 프로퍼티에 함수를 할당하는 방식입니다. 이벤트 핸들러가 HTML과 분리되어 유지보수에 유리하지만, 여전히 한 요소에 하나의 이벤트 리스너만 할당할 수 있다는 제약이 있습니다.
addEventListener를 사용한 이벤트: 가장 모던하고 권장되는 방식입니다. 여러 이벤트를 하나의 요소에 할당할 수 있으며, 이벤트 캡처링과 버블링을 제어할 수 있는 옵션이 있습니다.

이벤트 핸들러의 종류

이벤트 핸들러	설명	예제
onclick	요소를 클릭했을 때 발생합니다.	element.onclick = function() { alert(‘클릭!’); };
ondblclick	요소를 더블 클릭했을 때 발생합니다.	element.ondblclick = function() { alert(‘더블 클릭!’); };
onmouseover	마우스가 요소 위로 이동했을 때 발생합니다.	element.onmouseover = function() { alert(‘마우스 오버!’); };
onmouseout	마우스가 요소에서 벗어났을 때 발생합니다.	element.onmouseout = function() { alert(‘마우스 아웃!’); };
onmousemove	마우스가 요소 위에서 움직일 때 발생합니다.	element.onmousemove = function() { alert(‘마우스 이동!’); };
onmousedown	마우스 버튼이 요소 위에서 눌렸을 때 발생합니다.	element.onmousedown = function() { alert(‘마우스 다운!’); };
onmouseup	마우스 버튼이 요소 위에서 떼어졌을 때 발생합니다.	element.onmouseup = function() { alert(‘마우스 업!’); };
onwheel	마우스 휠이 요소 위에서 움직였을 때 발생합니다.	element.onwheel = function() { alert(‘휠 이동!’); };
onkeydown	키보드의 키가 눌렸을 때 발생합니다.	element.onkeydown = function() { alert(‘키 다운!’); };
onkeyup	키보드의 키가 떼어졌을 때 발생합니다.	element.onkeyup = function() { alert(‘키 업!’); };
onkeypress	키보드의 키가 눌리고 있는 동안 발생합니다.	element.onkeypress = function() { alert(‘키 프레스!’); };
onfocus	요소가 포커스를 받았을 때 발생합니다.	element.onfocus = function() { alert(‘포커스!’); };
onblur	요소가 포커스를 잃었을 때 발생합니다.	element.onblur = function() { alert(‘블러!’); };
onchange	입력 필드의 값이 변경되었을 때 발생합니다.	element.onchange = function() { alert(‘변경됨!’); };
oninput	입력 필드에 입력이 이루어질 때 마다 발생합니다.	element.oninput = function() { alert(‘입력 중!’); };
onsubmit	폼이 제출될 때 발생합니다.	formElement.onsubmit = function() { alert(‘제출됨!’); };
onreset	폼이 리셋될 때 발생합니다.	formElement.onreset = function() { alert(‘리셋됨!’); };
onselect	사용자가 텍스트를 선택했을 때 발생합니다.	element.onselect = function() { alert(‘선택됨!’); };
onload	문서나 이미지가 로드되었을 때 발생합니다.	window.onload = function() { alert(‘로드 완료!’); };
onunload	페이지가 언로드될 때 발생합니다.	window.onunload = function() { alert(‘언로드!’); };
onresize	창이 리사이즈될 때 발생합니다.	window.onresize = function() { alert(‘리사이즈!’); };
onscroll	요소를 스크롤할 때 발생합니다.	element.onscroll = function() { alert(‘스크롤!’); };

이벤트 핸들러의 활용

폼 유효성 검사: 사용자가 폼을 제출하기 전에 입력 데이터의 유효성을 검증합니다.
동적 인터페이스 조작: 사용자의 액션에 따라 웹 페이지의 요소를 동적으로 추가, 삭제, 스타일 변경 등을 수행합니다.
사용자 피드백 제공: 마우스 오버, 클릭 등에 대한 즉각적인 시각적, 텍스트적 피드백을 제공합니다.
애니메이션 효과 구현: 사용자 인터랙션에 반응하여 웹 페이지의 요소에 애니메이션 효과를 추가합니다. 예를 들어, 버튼 위에 마우스를 올리면 버튼이 확대되는 효과 등입니다.
드래그 앤 드롭 기능: 사용자가 요소를 드래그하여 다른 위치로 이동시킬 수 있도록 하는 기능을 구현합니다. 이는 파일 업로드, 이미지 갤러리, 대시보드 위젯 등에서 자주 사용됩니다.

이벤트 핸들러 예제

HTML과 JavaScript를 사용하여 ‘클릭하여 색상 변경’ 기능을 구현하는 예제입니다.

HTML 코드

HTML

<!DOCTYPE html>
<html>
<head>
    <title>이벤트 핸들러 예제</title>
</head>
<body>

<button id="colorButton">색상 변경</button>

<script src="script.js"></script>

</body>
</html>

HTML

이 코드에서는 button 요소를 만들고, 이 버튼에 id 속성으로 “colorButton”을 부여했습니다. 이 id는 JavaScript에서 해당 버튼을 참조하기 위해 사용됩니다.

JavaScript 코드 (script.js)

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('colorButton');
    button.onclick = changeColor;
});

function changeColor() {
    const colors = ['red', 'blue', 'green', 'yellow', 'purple'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = randomColor;
}