JS_6. 이벤트

wstudee·2020년 9월 22일
0

HTML_CSS_JavaScript

목록 보기
14/21

onload

  • 객체가 로드되었을 때 발생
  • 웹페이지의 모든 컨텐츠가 완전히 로드된 후 수행
  • 가장 자주 사용되는 이벤트

onclick

  • 마우스로 요소를 클릭했을 때

ondblclick

  • 마우스로 요소를 연속 클릭했을 때

onmouseover

  • 마우스를 요소 위에 올렸을 때

onmouseout

  • 마우스가 요소 위에서 벗어났을 때

onmousemove

  • 마우스를 요소 위에서 움직일 때

onkeydown

  • 키보드의 키를 눌렀을 때
  • 누르고 있을 때 한번만 실행

onkeypress

  • 키보드의 키를 눌렀을 때
  • 누르고 있는 동안 계속 실행

onkeyup

  • 키보드의 키를 눌렀다가 뗐을 때
  • keydown - keypress - keyup 순으로 이벤트 발생함

onfocus

  • 요소에 입력 커서가 왔을 때
  • 포커스를 받았을 때

onblur

  • 입력 커서가 요소에서 나갔을 때
  • 포커스를 잃었을 때

onchange

  • 요소의 값이 변경되었을 때

이벤트 할당하기

HTML 태그에서 할당

<button onclick="proc()">클릭</button>

스크립트에서 할당

<script>
document.getElementById("myBtn").onclick = proc; // 수행될 함수명 
</script>

이벤트리스너

  • 스크립트에서 요소에 이벤트 리스너를 추가해서 이벤트 할당
  • addEventListener
  • removeEventListener 메서드 사용해서 이벤트 제거
<script>
document.getElementById("myBtn").addEventListener("click",proc);
</script>

0개의 댓글