[JavaScript] 이벤트

이벤트 등록

// 요소 선택
let 변수명 = document.querySelector("요소");
 
변수명.addEventListener("이벤트종류", function() {
    // 이벤트 발생 시 실행 코드
});  
 
// 또는
변수명.addEventListener("이벤트종류", 함수명); // 함수명은 괄호 없이

 

// click 이벤트는 button의 속성으로 지정 가능
<button onclick="함수명()">버튼명</button>
 
// return false; : 이벤트 발생 후 브라우저의 기본 동작을 막기 위해 사용함
// 기본 동작 예시 : 폼 전송
<button onclick="return false;">버튼명</button>

 

 

---

마우스 이벤트

#  click

  - HTML 요소를 마우스로 눌렀을 때

#  dblclick 

  - HTML 요소를 마우스로 두 번 눌렀을 때

#  mousedown

  - 요소 위에서 마우스 버튼을 누르는 동안

#  mousemove

  - 요소 위에서 마우스 포인터를 움직일 때

#  mouseover

  - 마우스 포인터가 요소 위로 옮겨질 때

#  mouseout

  - 마우스 포인터가 요소를 벗어날 때

#  mouseup

  - 누르고 있던 마우스 버튼에서 손을 뗄 때

 

 

---

키보드 이벤트

#  keypress

  - 키를 눌렀을 때

#  keydown

  - 키를 누르는 동안

#  keyup

  - 키에서 손을 뗄 때

 

 

반응형

728x90

---

폼 이벤트

#  blur

  - 폼 요소에서 포커스를 잃었을 때

#  change

  - 상태가 변경되었을 때

  - <input>, <select>, <textarea> 태그 등에서 사용함

  ex) 글자 입력 시 현재 글자 수 / 최대 글자 수를 보여줄 때 사용할 수 있음

        0/1000 → 1/1000 → 2/1000 ...

#  focus

  - 폼 요소에 포커스가 놓였을 때

  - <input>, <select>, <textarea>, <button> 태그 등에서 사용함

#  reset

  - 폼이 다시 시작되었을 때

#  submit

  - submit 버튼을 눌렀을 때

 

 

---

문서 로딩 이벤트

#  load

  - 문서 로딩이 끝났을 때

#  abort

  - 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때

#  error

  - 문서가 정확히 로딩되지 않았을 때

#  resize

  - 문서 화면 크기가 바뀌었을 때

#  scroll

  - 문서 화면이 스크롤되었을 때

#  unload

  - 문서를 벗어날 때

 

 

---

#  캡처링

  - 이벤트가 발생한 요소의 상위 요소에서부터 이벤트가 전파되는 방식

      : 가장 상위 요소에 등록된 이벤트 리스너부터 실행됨

      → 이벤트가 발생하면 가장 최상위 요소인 window에서부터 시작함

      → 이벤트가 발생한 요소까지 차례대로 이벤트가 전파됨

 

#  버블링

  - 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 방식

      : 가장 하위 요소에 등록된 이벤트 리스너부터 실행됨

      → 이벤트가 발생하면 이벤트가 발생한 요소에서부터 시작함

      → 가장 최상위 요소인 window까지 차례대로 이벤트가 전파됨

  - 기본적으로 버블링 방식으로 이벤트가 전파됨