메뉴 건너뛰기

XE Guidebook

JS 기초
2016.07.30 16:01

2-09 이벤트 Event

조회 수 11 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

◈ 이벤트 Event


이벤트란 밀 그대로 "어떤 사건"을 뜻하는 말로
javaScript에서 말하는 사건(event)에는 대표적으로 다음과 같은 것들이 있다.
 
 - 사용자가 버튼이나 태그를 클릭하는 사건
 - 웹브라우저의 창이 줄어드는 사건
 - 텍스트를 입력하기 위
 - 마우스를 클릭하는 사건
 - 마우스를 움직이는 사건
 - 키보드를 입력하는 사건
 
이러한 Event가 감지되면 Event와 연결된 함수가 작동된다.
 
 - 이벤트 리스너(event Listener) : Event를 감지하는 상황을 설정하는 것
 - 이벤트 트리거(event Trigger) : Event와 연결된 함수를 작동시키는 것
 - 이벤트 핸들러(event Handler) : Event가 호출되면서 작동되는 함수
 
 
▶ javaScript의 이벤트 사용법 
 
  onMouseOver   마우스 커서를 올리면 활성화,  링크 태그 또는 버튼 등에 사용
  onMouseOut    마우스 커서를 내리면 활성화,  링크 태그 또는 버튼 등에 사용
  onClick         마우스로 버튼 클릭시 활성화,  링크 태그 또는 각종 폼(form)등에 사용
  onSubmit       submit 버튼의 클릭시 활성화,  각종 폼(form)에 사용
  onLoad         페이지 로딩이 끝났을 때 활성화,  바디(body) 태그 안에 사용
  onUnload       방문자가 페이지에서 벗어날 때 활성화,  바디(body) 태그 안에 사용
 
 
- onMouseOver
 
  <img src="image.jpg" onMouseOver="this.src='image_m.jpg'">
  마우스를 이미지(image.jpg) 위에 올렸을 때, image_m.jpg로 바뀐다.
 
  <td style="background:#000;" onMouseOver="this.style.background='#ff0000'">
  마우스를 td 위에 올렸을 때, 검은 배경(#000)이 빨간 배경(#ff0000)으로 된다.
 
 
- onMouseOut
 
  <img src="image.jpg" onMouseOut="this.src='image_m.jpg'">
  <img src="image.jpg" onMouseOver="this.src='image_m.jpg'" onMouseOut="this.src='image.jpg'">
  마우스를 이미지(image.jpg) 위에서 올리면 image_m.jpg로 변경되고,
  마우스를 이미지에서 내리면 다시 (image.jpg)로 바뀐다.
 
  <td style="background:#000;" onMouseOut="this.style.background='#ff0000'">
 
  마우스를 td에서 떼었을 때, 검은 배경(#000)이 빨간 배경(#ff0000)으로 바뀐다.
 
 
- onClick
 
  <img src="image.jpg" onClick="this.src='image_m.jpg'">
  마우스로 이미지(image.jpg)를 클릭했을 때 image_m.jpg로 변경된다.
 
  <td style="background:#000;" onClick="this.style.background='#ff0000'">
  마우스로 td를 클릭했을 때 배경색이 검은색(#000)에서 빨간색(#ff0000)으로 변경된다.