[JavaScript] 이벤트

---

이벤트

 

● 이벤트 설정 방법

① html 태그에 직접 이벤트 설정

<!-- javascript 직접 작성 -->
<input type="button" onclick="alert('Hello')">

<!-- 함수 호출 -->
<input type="button" onclick="test()">	
<script>
	function test() {
		alert("Hello");
	}
</script>

 

② 고전 이벤트 방식

<input type="button" id="btn">
<script>
	/***  객체명.이벤트핸들러명 = 함수명  ***/
	let btn = document.getElementById("btn");
	btn.onclick = test;
    
	function test() {
		alert("Hello");
	}
</script>

 

③ 이벤트 리스너 방식으로 설정 (권장)

<input type="button" id="btn">
<script>
	/***  객체명.addEventListener(이벤트핸들러명, 함수)  ***/
	let btn = document.getElementById("btn");
	btn.addEventListener("click", function(e) {
		alert("Hello");
	});
</script>

 

● 이벤트 종류

onfocus	객체가 포커스를 받았을 때
onblur	객체가 포커스를 잃었을 때
onchange	내용이 변경 될 때
onclick	객체를 클릭 할 때
onload	html 문서 로딩 후
onunload	현재 html 문서 종료 할 때
onmousemove	마우스를 이동할 때
onmouseover	마우스 포인터가 있을 때
onmouseout	마우스 포인터가 벗어났을 때
onmousedown	마우스를 눌르고 있을 때
onmouseup	마우스를 놓았을 때
onreset	reset 버튼을 클릭 할 때 (true, false 반환)
onsubmit	submit 버튼을 클릭 할 때 (true, false 반환)
onabort	이미지 읽기를 중지 할 때
onerror	문서 또는 이미지를 읽는 도중 오류가 발생 했을 때
ondblclick	마우스를 더블클릭 했을 때
ondrapdrop	마우스를 드래그 앤 드랍 했을 때
onmove	윈도우를 움직였을 때
onresize	윈도우 크기를 변경했을 때

 

● 이벤트 관련 속성?

altkey
altleft

 

● 이벤트 객체 핸들링 (브라우저 별로 차이가 있음)

//이벤트 객체 핸들링
function test(event) {
	e = event || window.event;
}