javascript
이벤트 핸들러는 사용자의 입력, 마우스 움직임, 키보드 조작 등의 다양한 이벤트에 반응하여 실행되는 함수입니다. 이는 사용자와 웹 페이지 간의 상호작용을 가능하게 하며, 웹사이트의 동적 기능을 구현하는 데 중요한 역할을 합니다.
이벤트 핸들러 | 설명 | 예제 |
---|---|---|
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이 예제는 이벤트 핸들러를 사용하여 웹 페이지의 동적 상호작용을 만드는 기본적인 방법을 보여줍니다. 이벤트 핸들러는 웹 개발에서 다양한 방식으로 활용될 수 있으며, 사용자 경험을 풍부하게 하는 데 큰 역할을 합니다.
이벤트 핸들러는 웹 개발에서 필수적인 요소로, 사용자와 웹사이트 간의 상호작용을 동적으로 만들어 줍니다. 간단한 인터랙션에서부터 복잡한 애플리케이션 기능에 이르기까지, 이벤트 핸들러는 웹사이트의 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 따라서 웹 개발자로서 이벤트 핸들러를 효과적으로 사용하고 이해하는 것은 사용자에게 매력적이고 동적인 웹사이트를 제공하는 데 있어 필수적입니다.
테스트 시 의존성 주입(Dependency Injection)과 Mockito Spring 애플리케이션을 개발하다 보면, 테스트 코드에서 실제 빈(Bean)을 사용하지…
들어가며 스프링 기반 프로젝트에서 좋은 설계 구조와 테스트 전략은 소프트웨어 품질과 유지보수성에 직결됩니다. 최근 학습한…
들어가며 코드를 작성할 때 종종 "이 로직을 어떻게 단순하고 읽기 쉽게 표현할 수 있을까?" 고민하게…
HTTP 상태코드란 무엇인가? HTTP 상태코드(HTTP Status Code)는 서버가 클라이언트의 요청을 처리한 결과를 수치화된 코드로 나타내는…
HTTP란 무엇인가? HTTP(Hypertext Transfer Protocol)는 웹에서 데이터를 주고받기 위해 사용하는 응용 계층 프로토콜입니다. 우리가 브라우저에서…