[javaScript] 이벤트 원리, 종류

이벤트 작동 원리

단계1 : 마크업 태그에서 마우스를 클릭하거나 키보드 키 입력

<button id="아이디"> //클릭 이벤트 리스너가 연결되어 있음
</button>

단계2 : MouseEvent 객체 생성

웹브라우저는 마우스와 관련된 여러 정보가 들어있는 MouseEvent의 객체를 생성한다. (이벤트 리스너 실행)

MouseEvent 객체
- 클릭한 마우스 버튼 정보
- 클릭과 함께 누른 키보드 정보
- 단계1 에서 클릭한 마우스 위치 정보

단계3 : 이벤트 리스너 실행

이벤트가 발생하면 연결한 이벤트 리스너가 실행된다. (MouseEvent 객체가 이벤트 리스너 실행) 

function(event){
	event.이벤트 정보
}

 

 

이벤트 종류

 

• 마우스 이벤트 : 사용자가 마우스 버튼을 클릭했을 때 발생하는 이벤트. 이때 이벤트 객체에는 클릭한 마우스 버튼, 화면상 클릭된 위치, Ctrl이나 Alt키를 누른 상태에서 버튼이 클릭됐는지 정보가 저장됨
• 키보드 이벤트 : 사용자가 키보드를 눌렀을 때 발생하는 이벤트, 이 때 이벤트 객체에는 눌린 키보드 키에 대한 정보가 저장된다.
• 태그요소 고유 이벤트 : 각 태그 요소마다 가지고 있는 고유의 이벤트. 예시)input태그요소 - 입력한 정보가 바뀌면 change이벤트 생성
• 사용자 정의 이벤트 : 개발자가 직접 만들어서 사용하는 이벤트