07. 제이쿼리 이벤트 (1) : 이벤트 메서드 종류 및 이벤트 발생 / 제거

- 방문자가 웹사이트에 방문하여 동작을 취했을 때 제이쿼리 코드가 실행되도록 만드는 방법 소개

- 방문자의 모든 동작을 '이벤트'라고 하고,  이벤트가 발생했을 떄 코드를 실행시키는 것을 '이벤트 핸들러'라고 한다. 

 

* 이벤트 등록 메서드란?

- 이벤트 등록 메서드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있다. 

- 이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있다. 

- 단독 이벤트 메서드는 한 동작에 대한 이벤트를 등록할 때 사용

예) '요소를 클릭했을때, '요소를 더블클릭했을 때', '요소에 마우스 포인터를 올렸을 때'

 

<기본형>

$("#btn").click(function(){
	자바스크립트 코드;
})

1. $("#btn") : 이벤트 대상
2. click() : 이벤트 등록 메서드 (방문자의 특정 동작)
3. function(){} : 이벤트 핸들러

* 이벤트 등록 메서드의 종류 

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

 

* 이벤트 등록 방식 알아보기 

- 지정한 요소에 이벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식의 두 종류가 있다.

 

단독 이벤트 등록 메서드

<기본형>
$("이벤트 대상 선택").이벤트 등록 메서드(function(){
	자바스크립트 코드;
});

<button id="btn1"> 버튼 </button>
$(".btn1").click(function(){
	alert("welcome");
)}

 

그룹 이벤트 등록 이벤트

- 그룹 이벤트 등록 메서드는 대상에 한 가지 동작 이상의 이벤트를 등록할 수 있ㄷ다 

  (.on() 메서드를 사용하여 이벤트를 등록한다.)

on() 메서드 등록 방식 1
$("이벤트 대상 선택").on("이벤트 종류1 이벤트 종류2 .... 이벤트 종류n", function(){
	자바스크립트 코드;
});

on() 메서드 등록 방식 2
$("이벤트 대상 선택").on({"이벤트 종류1 이벤트 종류2 .... 이벤트 종류 n" : function(){
		자바스크립트 코드;
	}
}); 

on() 메서드 등록 방식 3
$("이벤트 대상 선택").on({
	"이벤트 종류1" : function() {자바스크립트 코드; 1},
    "이벤트 종류2" : function() {자바스크립트 코드; 2},
    ....
    "이벤트 종류n" : function() {자바스크립트 코드;n}
});    

---------------------------------------------------------------------------------------

on() 메서드 등록 방식 1
$(".btn1").on("mouseover focus", funtion() {
	console.log("welcome");
})

on() 메서드 등록 방식 2
$(".btn1").on({
	"mouseover focus" : function(){
    	console.log("welcome");
     }
});

on() 메서드 등록 방식 3
$(".btn1").on({
	"mouseover" : function(){
    	console.log("welcome");
    ),
    "focus" : function(){
    	console.log("welcome");
    }
});    

 

강제로 이벤트 발생시키기

- '이벤트가 강제로 발생했다'는 말은 '사용자에 의해' 이벤트가 발생했음을 의미하는 것이 아니라 '핸들러에 의해' 자동으로 이벤트가 발생했음을 의미

- 단독 이벤트 등록 메서드를 사용하거나 trigger() 메서드를 사용하면 강제로 이벤트를 발생시킬 수 있다.

<기본형>

$("이벤트 대상").단독 이벤트 등록 메서드();
$("이벤트 대상").trigger("이벤트 종류");

---------------------------------------------------

$(".btn1").click(function(){
	$(".btn1").parent().next().css({"color" : "#f00"});
}); 
-- [버튼1]에 click 이벤트가 발생하여 이벤트 핸들러가 실행됨.

$(".btn2").on({
	"mouseover focus" : function(){
    	$(".btn2").parent().next().css({"color" : "#0f0"});
    }
});

$(".btn1").click();
$(".btn2").trigger("mouseover");
-- [버튼2]에 마우스 포인터를 올리면 이벤트 핸들러(function(){자바스크립트 코드})가 자동으로 실행됨

 

이벤트 제거 메서드 

<기본형>

$("이벤트 대상").off("제거할 이벤트 종류");

$(".btn1").click(function(){
	$(".btn1").parent().next().css({"color" : "#f00"});
});

$(".btn2").on({
	"mouseover focus" : function(){
    	$(".btn2").parent().next().css({"color" : "#0f0"});
    }
});

$(".btn1").off("click"); ==> [버튼1]에 등록된 클릭 이벤트를 제거
$(".btn2").off("mouseover focus"); ==> [버튼2]에 등록된 마우스 오버, 포커스 이벤트를 제거