자바스크립트 이벤트(event)는 웹페이지에서 사용자가 어떤 행동을 할 때 발생하는 신호라고 생각하면 됩니다. 예를들어, 버튼을 클릭하거나 키보드 키를 누르거나, 화면을 스크롤 하는 등의 이벤트가 발생할 수 있습니다.
이때 자바스크립트는 이러한 이벤트를 감지 할 수 있습니다
이벤트를 등록하는 3가지 방법
인라인 (Inline) HTML 속성에 직접 등록하기 onclick, onmouseover 와 같은 속성
<button onclick="alert('버튼이 클릭되었어요!')">클릭</button>- 이 방법은 간단하지만, HTML과 자바스크립트 코드가 섞여 복잡성이 증가할 수 있어 권장되지 않습니다
Property Listener 자바스크립트 코드로 등록하기 element.onclick
const button = document.getElementById("myButton");
button.onclick = function() {
alert("버튼이 클릭되었어요!");
};- 이 방법은 HTML과 자바스크립트를 분리할 수 있어서 이전 방법보다는 관리가 용이합니다
addEventListener 사용하기 (추천⭐️)
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었어요!");
});
# 제거
button.removeEventListener('click')- 이벤트를 여러 번 추가할 수 있습니다
- 이벤트 제거 removeEventListener가 용이합니다
- 같은 요소에 여러 종류의 이벤트를 쉽게 추가할 수 있습니다
다양한 이벤트 종류 - 마우스, 키보드, 포커스, form, progress
마우스 이벤트
- mousedown - 마우스를 요소 안에서 누를 때 발생합니다
- mouseup - 마우스를 요소 안에서 눌렀다가 떼었을 때 발생합니다
- mouseenter - 마우스 포인터가 요소 안으로 진입할 때 발생합니다
- mouseleave - 마우스 포인터가 요소 밖으로 벗어날 때 발생합니다
- mousemove - 마우스 포인터가 요소 안에서 움직일 때 발생합니다
- event.clientX , Y - 브라우저 화면 기준 X, Y 좌표를 반환합니다
- event.pageX, Y - 전체 페이지 기준 X, Y 좌표를 반환합니다. 스크롤이 있는 긴 페이지에서도 위치를 정확히 파악할 수 있습니다
- event.target.getBoundingClientRect() - 요소의 크기와 뷰포트 기준 상대적인 위치 정보를 반환합니다
키보드 이벤트
- keypress - 키가 눌렸을 때 발생합니다. (특정 문자 키에 대해서만 발생하며, 최신 브라우저에서는 keydown을 권장합니다)
- keydown - 키를 누르는 순간 발생합니다. 모든 키에 대해 이벤트가 발생합니다
- keyup - 키를 눌렀다가 뗄 때 발생합니다
- event.key - 사용자가 누른 키의 값을 반환합니다
- event.keycode - 사용자가 누른 키의 ASCII 코드를 반환합니다. (keyCode는 오래된 방식이며, 현재는 event.key 사용이 권장됩니다.)
포커스 이벤트
- focus - 입력란에서 값을 입력하기 위해 텍스트 박스를 클릭했을 때 발생합니다
- blur - 입력을 마치고 텍스트 박스 밖의 영역을 클릭했을 때 발생합니다
- change - value 값이 변경되었을 때 발생합니다. 예를 들어, 체크박스가 체크되거나 해제될 때 발생합니다
form 이벤트
- submit - form 양식이 제출될 때 발생합니다
Progress 이벤트
- load - 이미지가 정상적으로 로드되어 화면에 보일 수 있을 때 발생합니다.
- error - 이미지가 로드되지 않고, 주소 오류나 네트워크 문제 등으로 로드에 실패했을 때 발생합니다.