Categories: JavaScript

JavaScript 자바스크립트 이벤트 (Event) 종류 및 설명

javascript

자바스크립트 이벤트란?

자바스크립트 이벤트는 웹 페이지에서 사용자의 상호작용에 반응하여 특정 동작을 수행하도록 하는 프로그래밍 메커니즘입니다. 이는 클릭, 키보드 입력, 마우스 이동, 폼 제출 등 다양한 사용자 상호작용에 반응하는 방식을 말합니다.

자바스크립트는 이러한 이벤트를 다루기 위한 다양한 메소드를 제공합니다. 이를 통해 개발자는 복잡한 코드 작성 없이 웹 페이지의 요소에 이벤트를 쉽게 추가하고 관리할 수 있습니다.

자바스크립트 이벤트 특징

다양한 이벤트 유형: 마우스, 키보드, 폼, 문서/윈도우 이벤트 등 다양한 유형의 이벤트를 다룰 수 있습니다.
브라우저 호환성: 대부분의 현대 브라우저에서 지원되는 이벤트들로 구성되어 있습니다.
이벤트 리스너: addEventListener 및 removeEventListener 메소드를 사용하여 이벤트 리스너를 추가하거나 제거할 수 있습니다.

자바스크립트 이벤트 종류

마우스 이벤트(Mouse Events)

이벤트	설명	예제 코드
click	요소를 클릭할 때 발생합니다.	element.addEventListener(‘click’, function() { /* 처리 로직 */ });
dblclick	요소를 더블 클릭할 때 발생합니다.	element.addEventListener(‘dblclick’, function() { /* 처리 로직 */ });
mouseover	마우스가 요소 위에 있을 때 발생합니다.	element.addEventListener(‘mouseover’, function() { /* 처리 로직 */ });
mouseout	마우스가 요소 밖으로 나갈 때 발생합니다.	element.addEventListener(‘mouseout’, function() { /* 처리 로직 */ });
mousedown	마우스 버튼이 눌렸을 때 발생합니다.	element.addEventListener(‘mousedown’, function() { /* 처리 로직 */ });
mouseup	마우스 버튼이 눌렸다가 놓아졌을 때 발생합니다.	element.addEventListener(‘mouseup’, function() { /* 처리 로직 */ });
mousemove	마우스가 움직일 때 발생합니다.	element.addEventListener(‘mousemove’, function() { /* 처리 로직 */ });
mouseenter	마우스 포인터가 요소 경계 내로 들어올 때 발생합니다.	element.addEventListener(‘mouseenter’, function() { /* 처리 로직 */ });
mouseleave	마우스 포인터가 요소 경계 밖으로 나갈 때 발생합니다.	element.addEventListener(‘mouseleave’, function() { /* 처리 로직 */ });
contextmenu	요소에서 우클릭 메뉴가 열릴 때 발생합니다.	element.addEventListener(‘contextmenu’, function() { /* 처리 로직 */ });

키보드 이벤트(Keyboard Events)

이벤트	설명	예제
keydown	키보드의 키가 눌렸을 때 발생합니다.	document.addEventListener(‘keydown’, function(event) { /* 처리 로직 */ });
keyup	키보드의 키가 눌렸다 떼어질 때 발생합니다.	document.addEventListener(‘keyup’, function(event) { /* 처리 로직 */ });
keypress	키가 눌려져 있는 동안 발생합니다.	document.addEventListener(‘keypress’, function(event) { /* 처리 로직 */ });

폼 이벤트(Form Events)

이벤트	설명	예제
submit	폼을 제출할 때 발생합니다.	form.addEventListener(‘submit’, function() { /* 처리 로직 */ });
change	폼 요소의 값이 변경될 때 발생합니다.	input.addEventListener(‘change’, function() { /* 처리 로직 */ });
focus	요소가 포커스를 받을 때 발생합니다.	input.addEventListener(‘focus’, function() { /* 처리 로직 */ });
blur	요소가 포커스를 잃었을 때 발생합니다.	input.addEventListener(‘blur’, function() { /* 처리 로직 */ });

문서/윈도우 이벤트(Document/Window Events)

이벤트	설명	예제
load	페이지 로딩이 완료되었을 때 발생합니다.	window.addEventListener(‘load’, function() { /* 처리 로직 */ });
resize	윈도우 크기를 조절할 때 발생합니다.	window.addEventListener(‘resize’, function() { /* 처리 로직 */ });
scroll	스크롤할 때 발생합니다.	window.addEventListener(‘scroll’, function() { /* 처리 로직 */ });

기타 이벤트(Other Events)

이벤트	설명	예제
contextmenu	우클릭 메뉴가 열릴 때 발생합니다.	element.addEventListener(‘contextmenu’, function() { /* 처리 로직 */ });

이벤트 사용 예시

마우스 이벤트 – click

설명: 사용자가 웹 페이지의 특정 요소를 클릭할 때 발생합니다. 가장 흔하게 사용되는 이벤트 중 하나로, 버튼 클릭, 링크 클릭 등에 사용됩니다.
활용법: 예를 들어, 버튼 클릭 시 특정 기능을 실행하고자 할 때 사용합니다.

JavaScript

document.getElementById('myButton').addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

JavaScript

이 예제에서는 id가 ‘myButton’인 버튼을 클릭하면 알림창을 띄우는 기능을 구현합니다.

키보드 이벤트 – keydown

설명: 키보드의 키를 누를 때 발생합니다. 사용자의 키보드 입력을 감지할 때 사용됩니다.
활용법: 예를 들어, 특정 키의 입력을 감지하거나 단축키 기능을 구현할 때 사용합니다.

JavaScript

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('Enter 키가 눌렸습니다!');
    }
});

JavaScript

이 예제에서는 사용자가 ‘Enter’ 키를 누를 때 콘솔에 메시지를 출력합니다.

폼 이벤트 – submit

설명: 폼(form)을 제출할 때 발생합니다. 주로 폼 데이터를 검증하거나 처리하기 전에 사용됩니다.
활용법: 예를 들어, 폼 제출 전에 입력 데이터의 유효성을 검사할 때 사용합니다.

JavaScript

document.getElementById('myForm').addEventListener('submit', function(event) {
    if (!isFormValid(this)) {
        event.preventDefault(); // 폼 제출을 중지합니다.
        alert('폼 데이터가 유효하지 않습니다!');
    }
});

JavaScript

이 예제에서는 폼 데이터의 유효성을 검사하고, 유효하지 않을 경우 제출을 중단합니다.

문서/윈도우 이벤트 – load

설명: 웹 페이지 또는 이미지가 완전히 로드되었을 때 발생합니다. 페이지 초기화에 주로 사용됩니다.
활용법: 예를 들어, 페이지 로드 완료 후 초기 설정을 구성하거나 데이터를 로드할 때 사용합니다.

JavaScript

window.addEventListener('load', function() {
    console.log('페이지가 완전히 로드되었습니다!');
});

JavaScript

이 예제에서는 페이지가 완전히 로드된 후 콘솔에 메시지를 출력합니다.

기타 이벤트 – resize

설명: 윈도우 크기 변경 감지
활용법: 윈도우 크기가 변경될 때 맞춤형 동작을 수행합니다.

JavaScript

window.addEventListener('resize', function() {
    console.log('윈도우 크기가 변경되었습니다. 현재 크기: ' + window.innerWidth);
});

JavaScript

이 코드는 브라우저 창의 크기가 변경될 때마다 새로운 창 크기를 콘솔에 출력합니다.

결론

자바스크립트의 이벤트 시스템은 웹 페이지에서 사용자 상호작용을 다루는 데 필수적입니다. 이벤트를 활용하면 사용자의 클릭, 마우스 이동, 키보드 입력, 폼 제출 등의 행동에 반응하여 웹 페이지가 동적이고 사용자 친화적으로 작동하게 할 수 있습니다. 각종 이벤트들은 웹 개발에서 다양한 목적으로 사용되며, 이를 통해 보다 풍부하고 상호작용적인 웹 경험을 제공합니다.

마우스 이벤트는 사용자의 마우스 작동을 감지하는 데 사용되며, 키보드 이벤트는 사용자의 키보드 입력을 처리하는 데 쓰입니다. 폼 이벤트는 폼의 제출과 같은 웹 폼 관련 동작을 다루는 데 필요하며, 문서/윈도우 이벤트는 웹 페이지의 로딩, 크기 조절, 스크롤 등의 동작을 처리합니다.

자바스크립트의 addEventListener와 removeEventListener 메소드를 사용하여 이러한 이벤트들을 쉽게 추가하고 제거할 수 있습니다. 이를 통해 개발자들은 웹 페이지에 필요한 기능과 상호작용을 보다 쉽고 효율적으로 구현할 수 있습니다.

결론적으로, 자바스크립트 이벤트는 웹 개발에서 매우 중요한 부분으로, 웹 페이지를 더욱 동적으로 만들어줍니다. 이벤트의 적절한 활용은 사용자 경험을 향상시키고, 웹 애플리케이션의 기능성을 극대화하는 데 기여합니다.

suover