(JS)이벤트

브라우저에서 사용자가 취하는 모든 동작을 이벤트라고 한다. 웹 사이트에서 마우스로 특정 요소를 클릭하거나 마우스를 올리는 행위 등 모든 동작이 이벤트이다.

이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 한다.

-이벤트의 종류

마우스 이벤트

onmouseover : 마우스가 해당 요소에 올라갔을 때 발생한다.
onmouseout : 마우스가 해당 요소를 벗어났을 때 발생한다.
onmousemove : 마우스가 해당 요소의 영역에서 움직일 때 발생한다.
onclick : 마우스로 해당 요소를 클릭했을 때 발생한다.
ondblclick : 마우스로 해당 요소를 더블클릭했을 때 발생한다.

키보드 이벤트

onkeypress : 해당 요소에서 키보드가 눌렸을 때 발생한다.
onkeydown : 해당 요소에서 키보드가 눌렸을 때 발생한다.
onkeyup : 해당 요소에서 키보드를 눌렀다 떼었을 때 발생한다.

기타 이벤트

onfocus : 해당 요소에 포커스가 갔을 때 발생한다.
onblur : 해당 요소에 포커스를 잃었을 때 발생한다.
onchange : 해당 요소의 value 속성값이 바뀌고, 포커스를 잃었을 때 발생한다.
onload : 해당 요소의 하위 요소를 모두 로딩했을 때 발생한다.
onunload : 문서를 닫거나 다른 문서로 이동했을 때 발생한다.
onsubmit : 폼 요소의 전송 버튼을 눌렀을 때 발생한다.
onreset : 폼 요소의 취소 버튼을 눌렀을 때 발생한다.
onresize : 해당 요소의 크기가 변경되었을 때 발생한다.
onerror : 문서 객체가 로드되는 동안 문제가 발생되었을 때 발생한다.

지정한 요소에 이벤트를 적용하는 방법에는 요소에 직접 이벤트를 등록하는 방법과, DOM을 이용하여 지정된 요소에 이벤트를 등록하는 방법이 있다.

직접 요소 이벤트 등록 방식

<button onclick="alert('event');">버튼</button>

DOM을 이용한 이벤트 등록 방식

<button id="btn">버튼</button>

document.getElementById("btn").onclick=function(){
  alert("event");
}