이벤트 핸들러는 사용자의 입력, 마우스 움직임, 키보드 조작 등의 다양한 이벤트에 반응하여 실행되는 함수입니다. 이는 사용자와 웹 페이지 간의 상호작용을 가능하게 하며, 웹사이트의 동적 기능을 구현하는 데 중요한 역할을 합니다.
이벤트 핸들러 | 설명 | 예제 |
---|---|---|
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를 사용하여 ‘클릭하여 색상 변경’ 기능을 구현하는 예제입니다.
<!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에서 해당 버튼을 참조하기 위해 사용됩니다.
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;
}
JavaScript이 예제는 이벤트 핸들러를 사용하여 웹 페이지의 동적 상호작용을 만드는 기본적인 방법을 보여줍니다. 이벤트 핸들러는 웹 개발에서 다양한 방식으로 활용될 수 있으며, 사용자 경험을 풍부하게 하는 데 큰 역할을 합니다.
이벤트 핸들러는 웹 개발에서 필수적인 요소로, 사용자와 웹사이트 간의 상호작용을 동적으로 만들어 줍니다. 간단한 인터랙션에서부터 복잡한 애플리케이션 기능에 이르기까지, 이벤트 핸들러는 웹사이트의 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 따라서 웹 개발자로서 이벤트 핸들러를 효과적으로 사용하고 이해하는 것은 사용자에게 매력적이고 동적인 웹사이트를 제공하는 데 있어 필수적입니다.
Enum이란? Enum은 "enumeration"의 줄임말로, 특정 값들의 집합을 정의할 수 있는 특별한 클래스입니다. 예를 들어, 요일,…
래퍼 클래스(Wrapper Class)란? 자바에서 래퍼 클래스는 기본 데이터 타입(Primitive Data Type)을 객체(Object)로 감싸는 클래스입니다. 자바의…
서론 Java에서 문자열을 다룰 때, 문자열의 변경이 빈번하게 발생하는 경우라면 StringBuilder 클래스를 사용하는 것이 매우…
String 클래스란? 자바에서 String 클래스는 가장 널리 사용되는 클래스 중 하나입니다. 문자열 시퀀스를 나타내며, 문자열을…
불변 객체란? 불변 객체(Immutable Object)는 생성된 이후 그 상태를 변경할 수 없는 객체를 의미합니다. 불변…