[Javascript] events , 이벤트 객체

이벤트 (Events)

브라우저에서 방문객이 취하는 모든 동작

   ex) 마우스 클릭, 키보드 타이핑 등

자바스크립트에 등록 가능한 이벤트들

종류		설명
마우스 이벤트	onmouseover	마우스가 지정한 요소에 올라갔을 때 발생
	onmouseout	마우스가 지정한 요소를 벗어났을 때
	onmousemove	마우스가 지정한 요소 영역에서 움직일 때
	onclick	마우스가 지정한 요소를 클릭했을 때
	ondbclick	마우스가 지정한 요소를 더블 클릭했을 때
키보드 이벤트	onkeypress	지정한 요소에서 키보드를 눌렸을 때 <찾아보니 -> '입력되는 키를 눌렀을 때' 반응. ex) 한글 입력, 방향키 등 즉시 text에 입력되는 사항이 아닌 건 이벤트가 발생하지 않는다>
	onkeydown	지정한 요소에서 키보드를 눌렀을 때 (키보드의 어떤 키가 눌러지더라도 반응)
	onkeydown	지정한 요소에서 키보드를 눌렀다 떼었을 때
기타 이벤트	onfocus	지정한 요소에 포커스가 갔을 때
	onblur	지정한 요소에 포커스가 다른 요소로 이동되어 포커스를 잃었을 때
	onchange	지정한 요소에 value 속성값이 바뀌고 포커스가 이동되었을 때
	onload	지정한 요소의 하위요소를 모두 로딩했을 때
	onunload	문서를 닫거나 다른 문서로 이동했을 때
	onsubmit	폼 요소에 전송 버튼을 눌렀을 때
	onreset	폼 요소에 취소 버튼을 눌렀을 때
	onresize	지정된 요소의 크기가 변경되었을 때
	onerror	문서 객체가 로드되는 동안 문제가 발생되었을 때

이용 방법

- 직접요소 이벤트 등록 방식

<button id="btn" onclick="alert('Event')">Click</button>

 

DOM이용한 이벤트 등록 방식

<실수로 다른 요소에 중복 or 다른 이벤트를 등록하는 것을 조심>

<button id="btn">Click</button>
---
document.getElementById("btn").onclick = function() {
	alert('Event');
}

 

이벤트 객체

이벤트 객체는 사이트에서 방문자가 이벤트를 발생시킬 때마다 생성할수있는데,

이 객체의 속성을 이용하면 다양한 이벤트 정보를 가져올 수 있다.

 

document.onkeydown = function(e) {

   alert(e);

}

하지만 브라우저마다 차이가 존재할 수 있다.

 

구분	종류	설명
마우스 이벤트 객체 속성	clientX	마우스 이벤트가 발생한 X 좌표값 (수평 스크롤바 이동 너비 무시)
	clientY	마우스 이벤트가 발생한 Y 좌표값 (수직스크롤바 이동 높이 무시)
	pageX	마우스 이벤트가 발생한 X 좌표값 (수평 스크롤바 이동 너비 무시)
	pageY	마우스 이벤트가 발생한 Y 좌표값 (수직 스크롤바 이동 높이 무시)
	screenX	화면 모니터를 기준으로 이벤트가 발생한 X 좌표값
	screenY	화면 모니터를 기준으로 이벤트가 발생한 Y 좌표값
	layerX	position을 적용한 요소를기준으로 이벤트가 발생한 X 좌표값
	layerY	position을 적용한 요소를기준으로 이벤트가 발생한 Y 좌표값
	button	마우스에 눌린 버튼의 값
키보드 이벤트 객체 속성	keyCode	키보드에 눌린 유니코드 값
	altKey	Alt키가 눌려있으면 true 아니면 false
	ctrlKey	Ctrl키가 눌려있으면 true 아니면 false
	shiftKey	shift키가 눌려있으면 true 아니면 false
전체 이벤트 객체 속성	target	this와 같이, 이벤트가 발생한 요소 반환