[Do it!] 07. 제이쿼리 이벤트 [1.이벤트 등록 메서드]

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

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

* 마우스 포인터를 올린 행위 => 이벤트

* 이러한 행위로 변화가 일어난 것 => 이벤트 핸들러

---

이벤트 등록 메서드란?

이벤트 : 사이트에서 방문자가 취하는 모든 행위

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

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

단독 이벤트 등록 메서드 : 하나의 이벤트만 등록할 수 있음

그룹 이벤트 등록 메서드 : 2개 이상의 이벤트를 등록할 수 있음

 

기본형

<button id="btn">이벤트</button>

$("#btn").click(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()	키보드에서 손을 떼었을 때 이벤트가 발생

---

 

이벤트 등록 방식 알아보기

지정한 요소에 이벤트를 등록하는 방법에는 단독 이벤트 등록 방식 & 그룹 이벤트 등록 방식

한 가지 동작 => 단독 or 그룹 이벤트 등록 메서드

두 가지 이상의 동작 => 그룹 이벤트 등록 메서드

 

단독 이벤트 등록 메서드

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

$(".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", function(){
    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("이벤트 종류");

 

 

이벤트 제거 메서드

이벤트를 제거하는 메서드로 off() 사용

 

기본형

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

 

버튼에 click 이벤트를 등록한 경우 개발자도구에서 이벤트 리스너로 확인할 수 있음

 

로딩 이벤트 메서드

사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행함

 

ready() / load() 이벤트 메서드

ready() 이벤트 메서드는 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document)의 로딩이 끝나면 이벤트 발생

load() 이벤트 메서드는 외부에 연동된 소스(iframe, img, video)의 로딩이 끝나면 이벤트 발생

 

기본형

$(document).ready(function(){자바스크립트코드; });
$(document).on("ready", function(){자바스크립트코드; });
$(window).load(function(){자바스크립트코드; });
$(window).on("load", function(){자바스크립트코드; });

---

마우스 이벤트

마우스 이벤트는 사용자가 사이트에서 마우스를 이용해서 취하는 모든 행위를 말함

사용자가 지정한 요소에 마우스 포인터를 올리거나 클릭하는 등의 행위를 말함

 

click() / dblclick() 이벤트 메서드

click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용

기본형

//click 이벤트 등록
$("이벤트 대상 선택").click(function(){자바스크립트 코드; });
$("이벤트 대상 선택").on('click',function(){자바스크립트 코드; });

//click 이벤트 강제 발생
$("이벤트 대상 선택").click();

 

dblclick() 이벤트 메서드는 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 더블클릭 이벤트를 발생시킴

기본형

//dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function(){자바스크립트 코드; });
$("이벤트 대상 선택").on('dblclick',function(){자바스크립트 코드; });

//dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dblclick();

 

 

<a>, <form> 태그에 클릭 이벤트 적용시 기본 이벤트 차단하기

<a> 요소에 click 이나 dblclick을 등록하면 클릭할 때마다 <a>에 링크된 주소로 이동하는 문제가 발생

이 문제를 해결하려면 <a> 요소의 기본 이벤트를 차단해야 함

<form> 요소의 제출 버튼(submit)도 action에 등록된 주소로 이동시키는 문제 발생

우리가 등록한 이벤트를 정상적으로 수행하려면 이러한 기본 이벤트를 차단해야 함

기본형 - <a>,<form> 태그에 이벤트를 등록하기 위해 기본 이벤트를 차단

//return false를 이용한 차단 방식
$("a 또는 form").이벤트 메서드(function(){
    자바스크립트 코드;
    return false;
});

//preventDefault() 메서드를 이용한 차단 방식
$("a 또는 form").이벤트 메서드(function(e){
    e.preventDefault();		//prevent(막다) + Default(기본이벤트)
    자바스크립트 코드;
});

 

mouseover() / mouseout() / hover() 이벤트 메서드

기본형

//mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function(){자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseover", function(){자바스크립트 코드; });

//mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover();

//mouseout 이벤트 등록
$("이벤트 대상 선택").mouseout(function(){자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseout", function(){자바스크립트 코드; });

//mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout();

//hover 이벤트 등록
$("이벤트 대상 선택").hover(
    function() {마우스 오버 시 실행될 코드},
    function() {마우스 오버 시 실행될 코드}
);

 

mouseenter() / mouseleave() 이벤트 메서드

(mouseover)대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트

(mouseenter)이벤트 대상이 포함된 범위에 마우스 포인터가 들어오면 발생하는 이벤트

(mouseout) 대상 요소에 마우스 포인터가 벗어나면 발생하는 이벤트

(mouseleave) 대상이 포함된 범위에서 마우스 포인터가 완전히 벗어나면 발생하는 이벤트

기본형

//mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function(){자바스크립트 코드});
$("이벤트 대상 선택").on("mouseenter",function(){자바스크립트 코드});

//mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();

//mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleave(function(){자바스크립트 코드});
$("이벤트 대상 선택").on("mouseleave",function(){자바스크립트 코드});

//mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();

 

mousemove() 이벤트 메서드

//mousemove 이벤트 등록
$("이벤트 대상 선택").mousemove(function(){자바스크립트 코드});
$("이벤트 대상 선택").on("mousemove",function(){자바스크립트 코드});

//mousemove 이벤트 강제 발생
$("이벤트 대상 선택").mousemove();

---

이벤트 객체와 종류

이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에 이벤트 객체가 생성

이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함

 

기본형

$("이벤트 대상 선택").mousemove(function(매개변수){
    매개변수(이벤트 객체).속성;
});

 

이벤트 객체의 속성 종류

구분	종류	설명
마우스 이벤트	clientX	마우스 포인터의 X 좌표값 반환
	clientY	마우스 포인터의 Y 좌표값 반환
	pageX	스크롤 X축의 이동한 거리를 계산해 마우스 포인터 X 좌표 반환
	pageY	스크롤 Y축의 이동한 거리를 계산해 마우스 포인터 Y 좌표 반환
	screenX	화면 모니터를 기준으로 마우스 포인터의 X 좌표값 반환
	screenY	화면 모니터를 기준으로 마우스 포인터의 Y 좌표값 반환
	layerX	position을 적용한 요소를 기준으로 마우스 포인터의 X 좌표값을 반환
	layerY	position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌표값을 반환
	button	마우스 버튼 종류에 따라 값을 반환 (왼쪽:0, 휠:1, 오른쪽:2)
키보드 이벤트	keyCode	키보드의 아스키 코드값 반환
	altKey	이벤트 발생 시 Alt 키가 눌렸으면 true, 아니면 false
	ctrlKey	이벤트 발생 시 ctrl키가 눌렸으면 true, 아니면 false
	shiftKey	이벤트 발생 시 shift키가 눌렸으면 true, 아니면 false
전체 이벤트	target	이벤트가 전파된 마지막 요소를 가리킴
	cancleBubble	이벤트의 전파를 차단하는 속성. 기본값은 false며, true로 설정하면 전파가 차단
	stopPropagation()	이벤트의 전파를 차단
	preventDefault()	기본 이벤트 차단

 

scroll() 이벤트 메서드

scroll() 이벤트 메서드는 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데 사용함

//scroll 이벤트 등록
$("이벤트 대상 선택").scroll(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("scroll",function(){자바스크립트 코드;});

//scroll 이벤트 강제 발생
$("이벤트 대상 선택").scroll();

 

포커스 이벤트

포커스는 마우스로 <a> 또는 <input> 태그 <Tab> 키를 누르면 생성됨

키보드 접근성 : 사용자가 키보드만으로 사이트를 이용해도 불편함이 없도록 작동시키기

키보드 접근성을 높이기 위해 마우스 이벤트를 등록할 때 <a>, <input> 태그에 등록 

or 키보드 없을 경우 고려하여 마우스 이벤트에 대응할 수 있는 키보드 이벤트까지 등록해야함

 

focus() / blur() / focusin() / focusout() 이벤트 메서드

focus() : 대상 요소로 포커스가 이동하면 이벤트 발생

blur() : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트 발생

focusin() : 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 발생

focusout() : 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생  

//focus 이벤트 등록
$("이벤트 대상 선택").focus(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("focus",function(){자바스크립트 코드;});

//focus 이벤트 강제 발생
$("이벤트 대상 선택").focus();

//blur 이벤트 등록
$("이벤트 대상 선택").blur(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("blur",function(){자바스크립트 코드;});

//blur 이벤트 강제 발생
$("이벤트 대상 선택").blur();

 

//focusin 이벤트 등록
$("이벤트 대상 선택").focusin(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("focusin",function(){자바스크립트 코드;});

//focusin 이벤트 강제 발생
$("이벤트 대상 선택").focusin();

//focusout 이벤트 등록
$("이벤트 대상 선택").focusout(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("focusout",function(){자바스크립트 코드;});

//focusout 이벤트 강제 발생
$("이벤트 대상 선택").focusout();

 

키보드로 마우스 이벤트 대응하기

키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것

마우스 이벤트가 등록되었을 때 반드시 키보드로 작동할 수 있게 대응 이벤트 함께 작성

마우스 이벤트	키보드 이벤트
mouseover	focus
mouseout	blur

 

1. 키보드 접근성을 배려하지 않은 이벤트 예 (비추천)

<button class="btn">버튼</button>
<p class="txt_1>내용1</p>

$(".btn").mouseover(function(){
	$(".txt_1").hide();
});

 

2. 키보드 접근성을 배려한 이벤트 적용 예(추천)

<button class="btn">버튼</button>
<p class="txt_1>내용1</p>

$(".btn").on("mouseover focus", function(){
	$(".txt_1").hide();
});

 

change() 이벤트 메서드

선택한 폼 요소의 값(value)을 새 값으로 변경

포커스가 다른 요소로 이동하면 이벤트 발생시킴

//change 이벤트 등록
$("이벤트 대상 선택").change(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("change",function(){자바스크립트 코드;});

//change 이벤트 강제 발생
$("이벤트 대상 선택").change();

 

키보드 이벤트

사용자가 키보드로 입력하면 발생함

 

keydown() / keyup() / keypress() 이벤트 메서드

keydown(), keypress() : 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생

keyup() : 자판의 키를 눌렀다 키에서 손을 떼면 이벤트를 발생

//keydown 이벤트 등록
$("이벤트 대상 선택").keydown(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("keydown",function(){자바스크립트 코드;});

//keydown 이벤트 강제 발생
$("이벤트 대상 선택").keydown();

//keyup 이벤트 등록
$("이벤트 대상 선택").keyup(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("keyup",function(){자바스크립트 코드;});

//keyup 이벤트 강제 발생
$("이벤트 대상 선택").keyup();

//keypress 이벤트 등록
$("이벤트 대상 선택").keypress(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("keypress",function(){자바스크립트 코드;});

//keypress 이벤트 강제 발생
$("이벤트 대상 선택").keypress();

 

이벤트가 발생한 요소 추적하기

사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해오는 방법

$(this) : 이벤트가 발생한 요소를 선택해 오는 선택자

index() : 이벤트가 발생한 요소의 인덱스값을 반환

이를 이용해 이벤트를 발생한 요소를 다양하게 제어할 수 있음

 

$(this) 선택자

이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적 가능

 

index() 인덱스 반환 메서드

이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환

$("이벤트 대상 선택").on("이벤트 종류", function(){
	$("이벤트 대상 선택").index(this);
});