JavaScript AWS 클라우드 기반 Devops 개발자 과정 이벤트 모델

자바스크립트에서의 이벤트

우리가 아는 특별한 이벤트가 아니다.

자바스크립트에서의 이벤트란?

사용자가 웹 페이지와 상호작용할 때 발생하는 특정 동작이나 상태 변화를 의미한다.

이러한 이벤트는 사용자의 클릭, 키 입력, 마우스 이동, 페이지 로드 등의 다양한 활동에 의해 트리거가 될 수 있다.

자바스크립트는 이러한 이벤트를 감지하고, 이벤트가 발생했을 때 특정 동작을 실행할 수 있도록 하는 기능을 제공한다.

 

주요 이벤트 종류

1. 사용자 인터페이스 관련 이벤트

사용자 인터페이스 관련 이벤트
click	사용자가 요소를 클릭했을 때 발생
dblclick	사용자가 요소를 두번 클릭했을 때 발생
mousemove	사용자가 마우스를 움직일 때 발생
mouseover	사용자가 요소 위로 마우스를 올렸을 때 발생
mouseout	사용자가 요소 밖으로 마우스를 이동했을 때 발생

 

2. 키보드 관련 이벤트

키보드 관련 이벤트
keydown	사용자가 키를 누를 때 발생
keyup	사용자가 키에서 손을 뗄 때 발생
keypress	문자 키를 누를 때 발생

 

3. 폼 관련 이벤트

폼 관련 이벤트
submit	사용자가 폼을 제출할 때 발생
focus	사용자가 입력 필드에 포커스를 두었을 때 발생
blur	사용자가 입력 필드에서 포커스를 벗어났을 때 발생

 

4. 로드 관련 이벤트

로드 관련 이벤트
load	페이지나 이미지 등의 리소스가 로드되었을 때 발생
resize	브라우저 창의 크기가 변경될 때 발생
scroll	페이지나 요소의 스크롤이 발생할 때 발생

 

 

 

이벤트 모델 종류

1. 고전 이벤트 모델

특정 요소 객체를 가지고 와서 해당 요소의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식

이벤트를 제거할 수도 있다.

 

 

 

2. 인라인 이벤트

요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식이다.

따로 script코드에 작성된 함수를 호출하는 방식이다.

 

 

3. 표준 이벤트 모델

w3c에서 공식적으로 지정한 이벤트 모델이다.

 

4. 태그별로 기본적으로 가지고 있는 이벤트 제거

기본적으로 이벤트가 있는 요소객체는 a태그, form내부 submit버튼 등이 있다.

- a태그 : 클릭 시 href에 제시되어 있는 url로 요청하는 기본 이벤트를 보유하고 있다.

- form내부 submit : 클릭 시 사용자가 입력한 값들을 action에 제시되어 있는 url로  태그 내에 기본적으로 설정되어 있는 이벤트가 실행 안되게 막고 싶다면 이벤트 핸들러의 return false로 하면 기본이벤트가 실행 안되게 할 수 있다.