[jQuery] 이벤트 메서드의 종류

1. 기본 형식

 

1번: 이벤트 대상

2번: 이벤트 등록 메서드

3번: 이벤트 핸들러

 

이벤트: 사이트에서 방문자가 취하는 행동

이벤트 핸들러: 이벤트가 발생했을 때 실행되는 일련의 실행 코드

 

이벤트 등록 메서드를 사용하게 되면?

방문자가 지정한 요소에서 어떤 특정 동작 발생시 저장된 실행문을 실행시킬 수 있다.

이벤트 등록 메서드에는 단독 이벤트 등록 메서드와 그룹 이벤트 등록 메서드가 있다.

 

단독 이벤트 등록 메서드: 하나의 동작에 대한 이벤트 등록 시 사용

그룹 이벤트 등록 메서드: 하나 이상의 이벤트 등록시 사용

 

---

메서드 등록 방식

1.

$("이벤트 대상 선택").on("이벤트 종류1 이벤트종류2....이벤트 종류n",

function(){

 자바스크립트 코드;

});

 

2.

$("이벤트 대상 선택").on({

"이벤트 종류1 이벤트 종류2 ... 이벤트 종류n" : function() {

  자바스크립트 코드;

 }

});

 

3.

$("이벤트 대상 선택").on({

 "이벤트 종류1" : function() {자바스크립트 코드;1},

 "이벤트 종류2" : function() {자바스크립트 코드;2},

 ....

 "이벤트 종류n" : function() {자바스크립트 코드;n},

});

 

 

선언적 함수	익명적 함수
function sum ({   //do something }); $("div").click(sum);	$(“div”).click(function(){   alert(“hello”); });
자주 쓰이는 기능을 담는 함수는 함수로 만들어서 위와 같이 사용한다.

 

---

 

 

구분	종류	설명
로딩이벤트	load()	선택한 이미지 또는 프레임 요소에 연동된 소스가 로딩 완료된 후 이벤트 발생
	ready()	지정한 HTML문서 객체가 로딩 완료 된 후 이벤트 발생
마우스 이벤트	click()	선택 요소 클릭 시 이벤트 발생
	dbclick()	선택 요소 더블 클릭 시 이벤트 발생
	mouseover()	선택 요소의 영역에 마우스를 올렸을 때 이벤트 발생
	mouseout()	선택 요소의 영역에서 마우스 벗어났을 때 이벤트 발생 하위 요소의 영향을 받는다.
	hover()	선택 요소에 마우스를 올렸을 때, 벗어났을 때 각각 이벤트 발생
	mousedown()	선택한 요소에서 마우스 버튼을 눌렀었을 때 이벤트 발생
	mouseup()	선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트 발생
	mouseenter()	선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트 발생
	mouseleave()	선택한 요소 범위 내에서 마우스가 벗어났을 때 이벤트 발생
	mousemove()	선택한 요소 범위 내에서 마우스가 움직였을 때 이벤트 발생
포커스 이벤트	focus()	선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스 생성
	focusin()	선택한 요소에 포커스가 생성되었을 때 이벤트가 발생
	focusout()	선택한 요소에서 포커스가 다른 요소로 이동되었을 때 이벤트 발생
	blur()	선택한 요소에서 포커스가 다른 요소로 이동되었을 때 이벤트를 발생시키거나 선택한 요소에 강제로 포커스 사라지도록 함
키보드 이벤트	keypress()	선택한 요소에서 키보드를 눌렀을 때 이벤트 발생 문자 키를 제외한 키 코드값 반환
	keydown()	선택한 요소에서 키보드를 눌렀을 때 이벤트 발생 자판 모든 키 코드값 반환
	keyup()	선택한 요소에서 키보드에서 손을 떼었을 때 이벤트 발생
기타	scroll()	스크롤바를 움직일 때 이벤트 발생
	change()	선택한 요소에 입력 요소의 값이 변경되었을 때 이벤트 발생
	error()	선택 요소에서 에러 발생시 이벤트 발생

 

[별도정리]

form태그와 관련된 이벤트 리스트 보러가기

 

 

 

---

참고자료

이벤트 등록 메서드란?

[jquery] jquery 이벤트 등록 메서드