jQuery 메소드로 이벤트 처리하기

R_jin·2023년 7월 26일
1

Javascript

목록 보기
11/12

이벤트 메소드

: jQuery는 .on() 메소드 이외에도 자바스크립트 이벤트와 관련된 다양한 메소드를 제공

  • 마우스 이벤트
  • 키보드 이벤트
  • 입력 양식 이벤트

참조: jQuery 라이브러리

마우스 이벤트와 관련된 메소드

메소드 설명
.click() 해당 요소에 “click” 이벤트가 발생되었을 때 설정한 함수가 실행 (클릭 시)
.dblclick() 해당 요소에 “dblclick” 이벤트가 발생되었을 때 설정한 함수가 실행 (더블클릭 시 이벤트 발생)
.hover() 자바스크립트의 “mouseenter"와 “mouseleave” 이벤트를 하나의 이벤트 핸들러와 연결되고, 해당 요소에 “mouseenter"와 “mouseleave” 이벤트가 발생되었을 때 설정한 함수가 실행
.mousedown() 해당 요소에 “mousedown” 이벤트가 발생되었을 때 설정한 함수가 실행
.mouseenter() 해당 요소 위로 마우스가 진입할 때 발생하는 이벤트가 이벤트 핸들러에 연결되고, 해당 요소에 마우스 진입 이벤트가 발생되었을 때 설정한 함수가 실행
.mouseleave() 해당 요소에서 마우스가 빠져나갈 때 발생하는 이벤트와 이벤트 핸들러에 연결되고, 해당 요소에 마우스가 빠져나가는 이벤트가 발생되었을 때 설정한 함수가 실행
.mousemove() 해당 요소에 “mousemove” 이벤트가 발생되었을 때 설정한 함수가 실행
.mouseout() 해당 요소에 “mouseout” 이벤트가 발생되었을 때 설정한 함수가 실행
.mouseover() 해당 요소에 “mouseover” 이벤트가 발생되었을 때 설정한 함수가 실행
.mouseup() 해당 요소에 “mouseup” 이벤트가 발생되었을 때 설정한 함수가 실행

키보드 메소드와 관련된 메소드

메소드 설명
.keydown() 해당 요소에 “keydown” 이벤트가 발생되었을 때 설정한 함수가 실행
.keyup() 해당 요소에 “keyup” 이벤트가 발생되었을 때 설정한 함수가 실행
.keypress() 해당 요소에 “keypress” 이벤트가 발생되었을 때 설정한 함수가 실행

입력 양식 이벤트와 관련된 메소드

메소드 설명
.blur() 해당 요소에 “blur” 이벤트를 발생
.change() 해당 요소에 “change” 이벤트가 발생되었을 때 설정한 함수가 실행
.select() 해당 요소에 “select” 이벤트가 발생되었을 때 설정한 함수가 실행
.submit() 해당 요소에 “submit” 이벤트가 발생되었을 때 설정한 함수가 실행
.focus() 해당 요소에 “focus” 이벤트가 발생되었을 때 설정한 함수가 실행
.focusin() 해당 요소에 “focusin” 이벤트가 발생되었을 때 설정한 함수가 실행
.focusout() 해당 요소에 “focusout” 이벤트가 발생되었을 때 설정한 함수가 실행
profile
3년차 퍼블리셔의 스터디

0개의 댓글