이벤트
이벤트(event)는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미한다.
자바스크립트로 이벤트 종류에 따른 제어 작업을 할 수 있다.
1. 이벤트 종류
구분 | 이벤트 | 설명 |
마우스 이벤트 | onclick | 마우스로 클릭하면 발생한다. |
ondblclick | 마우스로 빠르게 두 번 클릭하면 발생한다. | |
onmouseover | 마우스 포인터를 올리면 발생한다. | |
onmouseout | 마우스 포인터가 빠져나가면 발생한다. | |
onmousemove | 마우스 포인터가 움직이면 발생한다. | |
onwheel | 마우스 휠(wheel)을 움직이면 발생한다. | |
키보드 이벤트 | onkeypress | 키보드 버튼을 누르고 있는 동안 발생한다. |
onkeydown | 키보드 버튼을 누른 순간 발생한다. | |
onkeyup | 키보드 버튼을 눌렀다가 뗀 순간 발생한다. | |
포커스 이벤트 | onfocus | 요소에 포커스가 되면 발생한다. |
onblur | 요소가 포커스를 잃으면 발생한다. | |
폼 이벤트 | onsubmit | 폼이 전송될 때 발생한다. |
리소스 이벤트 | onload | 웹 브라우저의 리소스 로드가 끝나면 발생한다. |
2. 이벤트 등록
방법 | 설명 |
인라인 방식 | HTML 태그에 속성으로 이벤트를 등록하는 방법 |
프로퍼티 리스너 | 요소 노드에 직접 속성으로 이벤트를 등록하는 방법 |
이벤트 등록 메서드 | DOM에서 제공하는 addEventListener() 메서드를 사용해 이벤트를 등록하는 방법(권장) <노드>.addEventListener("<이벤트 타입>", <이벤트 함수>); |
*이벤트 등록 메서드
<button>클릭</button>
<script>
const btnE1 = document.querySelector("button");
btnE1.addEventListener("click", function() {
alert("button Click");
});
</script>
이벤트 객체
1. 이벤트 객체
이벤트 객체는 이벤트 타입에 따라 발생하는 이벤트의 각종 정보가 들어 있는 객체 집합이라고 생각하면 된다.
이벤트 객체는 개발자가 직접 생성하는 것이 아니라 이벤트가 발생하면 실행되는 함수의 매개변수로 같이 전달된다.
<button>클릭</button>
<script>
const btnE1 = document.querySelector("button");
btnE1.addEventListener("click", function(event) {
console.log(event);
});
</script>
2. 이벤트 객체의 주요 속성
이벤트 객체 | 속성 | 설명 |
PointerEvent | clientX | 마우스가 클릭된 x좌표(수평 스크롤 포함 X) |
clientY | 마우스가 클릭된 y좌표(수직 스크롤 포함 X) | |
pageX | 마우스가 클릭된 x좌표(수평 스크롤 포함 O) | |
pageY | 마우스가 클릭된 y좌표(수직 스크롤 포함 O) | |
screenX | 모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표 | |
screenY | 모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표 | |
KeyboardEvent | keyCode | 키보드에서 눌린 키의 유니코드 값을 반환한다. |
ctrlKey | Ctrl 키가 눌렸으면 true, 그렇지 않으면 false를 반환한다. | |
altKey | Alt 키가 눌렸으면 true, 그렇지 않으면 false를 반환한다. | |
shiftKey | Shift 키가 눌렸으면 true, 그렇지 않으면 false를 반환한다. |
3. 이벤트 취소
preventDefault() 메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있다.
this 키워드
이벤트 함수 내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있다.
단, 화살표 함수일 때는 이벤트 객체의 target 속성으로 참조해야 한다.
'DEVELOPMENT > JavaScript' 카테고리의 다른 글
[JavaScript] 문서 객체 모델 - DOM, Node , 폼(form) (0) | 2023.02.09 |
---|---|
[JavaScript] 객체 - 객체 특성, 표준 내장 객체, 브라우저 객체 모델 (0) | 2023.02.08 |
[JavaScript] 함수 - 함수 정의, 스코프, 함수 호이스팅, 즉시 실행 함수 (0) | 2023.02.07 |
[JavaScript] 기초 문법 - 변수와 상수, 자료형, 객체, 연산자, 조건문, 반복문 (0) | 2023.02.06 |