[Javascript] 이벤트(event)

 

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

 

이벤트(Event)

  이벤트란 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 단 웹 페이지를 읽어오거나 링크를 누르는 것처럼 웹 문서 영역 안에서 이뤄지는 동작만을 의미한다.

 

   많이 사용되는 이벤트 종류 

• 마우스 이벤트 : 마우스 버튼이나 휠 버튼 조작시 발생하는 이벤트
• 키보드 이벤트 : 키보드에서 특정키 조작시 발생하는 이벤트
• 문서 로딩 이벤트 : 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트
• 폼(form) 이벤트 : 폼 요소에 내용입력시 발생하는 이벤트

 

 

  ■ 마우스 이벤트

  마우스 이벤트는 마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트이다.

속  성	설  명
click	사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트 발생
dblclick	사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트 발생
mousedown	사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트 발생
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트 발생
mouseup	사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트 발생

 

 

  ■ 키보드 이벤트

  키보드 이벤트는 키보드에서 특정 키를 조작할 때 발생하는 이벤트이다.

속  성	설  명
keypress	사용자가 키를 눌렀을 때 이벤트 발생
keydown	사용자가 키를 누르는 동안 이벤트 발생
keyup	사용자가 키에서 손을 뗄 때 이벤트 발생

 

 

  ■ 문서 로딩 이벤트

  서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트이다.

속  성	설  명
abort	웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생
error	문서가 정확히 로딩되지 않았을 때 이벤트 발생
load	문서 로딩이 끝나면 이벤트 발생
unload	문서를 벗어날 때 이벤트 발생
resize	문서 화면 크기가 바뀌었을 때 이벤트 발생
scroll	문서 화면이 스크롤되었을 때 이벤트 발생

 

 

  ■ 폼(form) 이벤트

  폼 요소에 내용을 입력하면서 발생할 수 있는 여러 이벤트를 말한다.

   폼(form)  : 로그인이나 검색 · 게시판 · 설문 조사처럼 사용자가 정보를 입력하는 모든 요소

 

속  성	설  명
blur	폼 요소에 포커스를 잃었을 때 이벤트 발생
change	목록이나 체크 상태 등이 변경되었을 때 이벤트 발생  <input> ,  <select> ,  <textarea> 태그에서 사용
focus	폼 요소에 포커스가 놓였을 때 이벤트 발생  <label> ,  <select> ,  <textarea> ,  <button> 태그에서 사용
reset	폼이 다시 시작되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생

 

 

 

이벤트 처리기, 이벤트 핸들러(Event Handler)

<button class="over" id="open" ondblclick="alert('더블클릭 했습니다.')">상세 설명 보기</button>

이벤트와 이벤트 처리함수를 연결해 주는 것을 이벤트 처리기 또는 이벤트 핸들러라고 한다.

이벤트 처리기는 이벤트 이름 앞에  on 을 붙여서 사용한다. 위와 같이 태그 속성에 추가해주면 된다. 

 

var coverImage = document.querySelector("#cover");
coverImage.onclick = function(){
    alert('눌렀습니다.');
}

coverImage.onmouseover = function(){
    coverImage.style.border = "5px black solid";
};

coverImage.onmouseout = function(){
    coverImage.style.border = "";
}

  querySelector( )함수를 사용하면 웹 요소를 스크립트 태그 안으로 가져와 사용할 수 있다.

이렇게 하면 HTML 태그와 스크립트 소스를 완전히 분리해서 사용할 수 있고 하나의 요소에 여러 이벤트 처리기를 사용할 수 있다.