사용자가 웹사이트에 방문해서 동작을 취했을 때 제이쿼리 코드가 실행되도록 만드는 방법을 다루는 단원입니다.
- 이벤트 : 사이트에서 방문자가 취하는 모든 행위
- 이벤트 핸들러 : 이벤트가 발생했을 때 코드를 실행시키는 것
- 이벤트 메서드 : 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행
제이쿼리 이벤트 메서드는 하나의 이벤트만 등록할 수 있는 단독이벤트 메서드, 2개 이상의 이벤트를 등록할 수 있는 그룹이벤트 등록 메서드로 나뉩니다. 단독이벤트 등록 메서드는 로딩, 마우스, 포커스, 키보드, 기타 이벤트로 나눌 수 있습니다.
| 구분 | 종류 | 설명 |
| 로딩 이벤트 | load() | 선택한 이미지나 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트 발생 |
| ready() | 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트 발생 | |
| error() | 이벤트 대상 요소에서 오류가 발생하면 이벤트 발생 | |
| 마우스 이벤트 | click() | 선택한 요소를 클릭했을 때 이벤트 발생 |
| dbclick() | 선택한 요소를 연속 두 번 클릭했을 때 이벤트 발생 | |
| mouseout() | 선택한 요소의 영역에 마우스 포인터가 벗어났을 때 이벤트 발생 * 하위 요소의 영향을 받음 |
|
| mouseover() | 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트 발생 | |
| hover() | 선택한 요소에 마우스 포인터를 올렸을 때, 벗어났을 때 각각 이벤트 발생 | |
| mousedown() | 선택한 요소에 마우스 버튼을 눌렀을 때 이벤트 발생 | |
| mouseup() | 선택한 요소에 마우스 버튼을 눌렀다 뗐을 때 이벤트 발생 | |
| mouseenter() | 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트 발생 | |
| mouseleave() | 선택한 요소의 영역에 마우스 포인터가 벗어났을 때 이벤트 발생 | |
| mousemove() | 선택한 요소의 영역에서 마우스 포인터를 움직였을 때 이벤트 발생 | |
| scroll() | 가로, 세로 스크롤바를 움직일 때마다 이벤트 발생 | |
| 포커스 이벤트 | focus() | 선택한 요소에 포커스가 생성될 때 이벤트 발생 or 선택한 요소에 강제로 포커스 생성 |
| focusin() | 선택한 요소에 포커스가 생성되었을 때 이벤트 발생 | |
| focusout() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생 | |
| blur() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생 or 선택한 요소의 포커스가 강제로 사라지게 함 |
|
| change() | 이벤트 대상인 입력 요소의 값이 변경되고 포커스가 이동하면 이벤트 발생 * 강제로 change 이벤트를 발생시킬 때도 사용 |
|
| 키보드 이벤트 | keypress() | 선택한 요소에서 키보드를 눌렀을 때 이벤트 발생 문자 키를 제외한 키의 코드값 반환 |
| keydown() | 선택한 요소에서 키보드를 눌렀을 때 이벤트 발생 키보드의 모든 키의 코드값 반환 |
|
| keyup() | 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트 발생 |
이벤트 등록방식 알아보기
지정한 요소에 이벤트를 등록하려면 한 가지 동작에 대한 이벤트 등록은 단독이벤트 등록 방식, 두 가지 이상의 동작에 대한 이벤트 등록은 그룹이벤트 등록 방식이 있습니다. 그룹 이벤트 등록 메서드는 on() 메서드를 사용하여 이벤트를 등록합니다.
1 단독 이벤트 등록 메서드
$("이벤트대상").이벤트 등록 메서드(function(){
code;
});
// example
$(".btn1").click(function(){
alert();
});
등록 메서드
// on() 메서드 등록 방식 1
$("이벤트 대상 선택").on("이벤트종류1 이벤트종류2 ... 이벤트종류n",
function(){
자바스크립트 코드;
}
});
// example
$(".btn1").on("mouseover focus",
function(){
console.log("welcome");
}
});
// on() 메서드 등록 방식 2
$("이벤트 대상 선택").on({
"이벤트종류1 이벤트종류2 ... 이벤트종류n" : function(){
자바스크립트 코드;
}
});
// example
$(".btn1").on({
"mouseover focus" : function(){
console.log("welcome");
}
});
// on() 메서드 등록 방식 3
$("이벤트 대상 선택").on({
"이벤트종류1" :function(){ 자바스크립트 코드;1 },
"이벤트종류2" :function(){ 자바스크립트 코드;2 },
...
"이벤트종류n" :function(){ 자바스크립트 코드;n };
});
// example
$(".btn1").on({
"mouseover" :function(){ console.log("welcome"); },
"focus" :function(){ console.log("welcome"); }
});
3 강제로 이벤트 발생하기
이벤트가 강제로 발생했다는 것은 사용자가 아닌 핸들러에 의해 자동으로 이벤트가 발생한 것입니다.
변수의 값을 사용자가 직접 버튼을 눌러 증가시키지 않고 trigger() 메서드를 사용하거나 단독 이벤트 등록 메서드를 사용하면 강제로 이벤트를 발생해 변수를 증가할 수 있습니다.
$("이벤트 대상").단독 이벤트 등록 메서드();
$("이벤트 대상").trigger("이벤트 종류");$(function(){
$(".btn1").click(function(){
$(".btn1").parent().next().css({"color" : "#f00"});
}); //버튼에 클릭이벤트가 발생하며 이벤트 핸들러가 실행
$(".btn2").on({
"mouseover focus" : function(){
$(".btn2").parent().next().css({"color" : "#0f0"});
}
});
$(".btn1").click();
$(".btn2").trigger("mouseover");
//버튼에 mouseover 가 되면 이벤트 핸들러(function)이 자동 실행
});<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>
내용1
</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>
내용2
</p>
</body>
4 이벤트 제거 메서드
이벤트 제거 메서드는 off()가 있습니다. 등록된 이벤트가 제거되면 브라우저의 개발자 도구의 Event Listners에서도 사라지는 걸 확인할 수 있습니다.
$("이벤트 대상").off("제거할 이벤트 종류");
// 예
$(".btn1").off("click");
5 로딩 이벤트 메서드
로딩 이벤트 메서드는 사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행합니다. ready(), load()가 있습니다. ready() 메서드는 사이트를 방문할 떄 요청한 HTML문서 객체 (document) 로딩이 끝나면 이벤트를 발생하고(즉 html에 전체 요소가 로딩되면), load() 메서드는 외부에 연동된 소스(img, video, iframe)의 로딩이 끝나면 이벤트를 발생시킵니다.
$(document).ready(function(){ code; });
$(document).on("ready", function(){ code; });
$(window).load(function(){ code; });
$(window).on("load", function(){ code; });
6 마우스이벤트
지정한 요소를 클릭하는 것부터 마우스 포인터를 올리는 등 사용자가 마우스를 이용해서 취하는 모든 행위를 캐치합니다.
click() / dblclick()
// 이벤트 등록
$("이벤트대상").click(function(){ code; });
$("이벤트대상").on("click", function(){ code; });
// 강제 발생
$("이벤트대상").click();// 이벤트 등록
$("이벤트대상").dblclick(function(){ code; });
$("이벤트대상").on("dblclick", function(){ code; });
// 강제 발생
$("이벤트대상").dblclick();
<a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트를 차단하기
<a> 요소에 click이나 dblclick을 등록하면 클릭할 때마다 태그에 링크된 주소로 이동하는 문제점이 있습니다. 해결하려면 <a> 요소의 기본 이벤트를 차단해야합니다. <form> 요소의 submit 버튼도 action에 등록된 주소로 이동시키는 문제가 있어 '등록한 이벤트를 정상 작동하려면' 기본 이벤트를 차단해야 합니다. 기본 이벤트의 차단은 return false 를 사용하거나 preventDefault() 메서드를 사용하여 차단할 수 있습니다.
// 1) return false
$("a | form").이벤트 메서드(function(){
자바스크립트 코드;
return flase;
});
// 2) preventDefault() 메서드를 사용
$("a | form").이벤트 메서드(function(e){
e.preventDefault();
자바스크립트 코드;
});
mouseover()/mouseout()/hover()/mouseenter()/mouseleave()/mousemove()
mouseover()과 mouseenter()의 차이는 mouseover는 대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트이고, mouseenter는 이벤트 대상이 포함된 범위에 마우스 포인터가 들어오면 발생하는 이벤트입니다. mouseout은 대상 '요소'에서 마우스 포인트가 벗어나면 발생하는 이벤트이고, mouseleave는 대상이 포함된 '범위'에서 마우스 포인터가 벗어나면 발생하는 이벤트입니다.
// 이벤트 등록
$("이벤트대상").mouseover(function(){ code; });
$("이벤트대상").on("mouseover", function(){ code; });
// 강제 발생
$("이벤트대상").mouseover();// 이벤트 등록
$("이벤트대상").mouseout(function(){ code; });
$("이벤트대상").on("mouseout", function(){ code; });
// 강제 발생
$("이벤트대상").mouseout();// 이벤트 등록
$("이벤트대상").hover(
function(){ code; },
function(){ code; }
);// 이벤트 등록
$("이벤트대상").mouseenter(function(){ code; });
$("이벤트대상").on("mouseenter", function(){ code; });
// 강제 발생
$("이벤트대상").mouseenter();// 이벤트 등록
$("이벤트대상").mouseleave(function(){ code; });
$("이벤트대상").on("mouseleave", function(){ code; });
// 강제 발생
$("이벤트대상").mouseleave();// 이벤트 등록
$("이벤트대상").mousemove(function(){ code; });
$("이벤트대상").on("mousemove", function(){ code; });
// 이벤트 발생
$("이벤트대상").mousemove();
mousemove 이벤트가 발생할 때마다 마우스 포인터의 좌표값을 span에 출력하는 예제
pageX, pageY가 생소하시죠? 곧이어 나옵니다.
이벤트 객체와 종류
사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있습니다.
$("이벤트 대상 선택").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, or false 반환 | |
| ctrlKey | 이벤트 발생 시 Ctrl 키가 눌렸으면 true, or false 반환 | |
| shiftKey | 이벤트 발생 시 Shift키가 눌렸으면 true, or false 반환 | |
| 전체 이벤트 | target | 이벤트가 전파된 마지막 요소를 가르킴 |
| cancelBubble | 이벤트 전파를 차단하는 속성으로 기본값 false true로 설정하면 이벤트 전파가 차단 |
|
| stopPropagation() | 이벤트 전파 차단 | |
| preventDefault() | 기본 이벤트 차단 (앞에 나온 내용) |
scroll()
대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데 사용됩니다.
// 이벤트 등록
$("이벤트대상").scroll(function(){ code; });
$("이벤트대상").on("scroll", function(){ code; });
// 강제 발생
$("이벤트대상").scroll();
포커스 이벤트
포커스는 마우스로 <a>나 <input> 태그를 클릭하거나 Tab 키를 누르면 생성됩니다. 키보드 접근성을 높이기 위해서는 마우스 이벤트를 되도록이면 <a>나 <input> 태그에 등록하고, 키보드가 없을 경우를 고려하여 마우스 이벤트에 대응할 수 있는 키보드 이벤트까지 등록해야합니다. 마우스 이벤트에 대응하는 키보드 이벤트 메서드는 focus(), focusin(), blur(), focusout()가 있겠습니다.
// 키보드 접근성을 배려한 이벤트 적용
// 예시는 버튼 숨기기 이벤트
$(".btn").on("mouseover focus", function(){
$(".txt_1").hide();
});
focus() : 대상 요소로 포커스가 이동하면 이벤트 발생, mouseover에 대응
blur() : 포커스가 대상요소에서 다른요소로 이동하면 이벤트 발생, mouseout에 대응
focusin() : 대상 요소의 하위요소 중 입력요소로 포커스가 이동하면 이벤트 발생
focusout() : // 입력요소에서 외부 요소로 이동하면 이벤트 발생
change() 이벤트 메서드
선택한 폼 요소의 value를 새 값으로 바꾸고 포커스가 다른 요소로 이동하면 이벤트를 발생시킵니다.
$(function(){
$("#rel_site").on("change", function(){
$("#txt").text($(this).val());
});
});
7 키보드 이벤트
keydown()/keyup()/keypress()
keydown()은 한글 키 제외 모든 키에 대해 이벤트를 발생시키지만 keypress()는 기능키에 대해서는 이벤트를 발생시키지 않습니다. (F1~F12, Alt, Ctrl, Shift, ↑, Backspace, Caps Lock, 한/영, Tab 등) 키보드 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있고, 이를 이용해서 단축키 기능을 만들 수 있습니다.
// 이벤트 등록
$("이벤트대상").keydown(function(){ code; });
$("이벤트대상").on("keydown", function(){ code; });
// 강제 발생
$("이벤트대상").keydown();
// 이벤트 등록
$("이벤트대상").keyup(function(){ code; });
$("이벤트대상").on("keyup", function(){ code; });
// 강제 발생
$("이벤트대상").keyup();
// 이벤트 등록
$("이벤트대상").keypress(function(){ code; });
$("이벤트대상").on("keypress", function(){ code; });
// 강제 발생
$("이벤트대상").keypress();
이벤트가 발생한 요소 추적하기
$(this) 선택자 : 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있습니다.
index() 인덱스 반환 메서드 : 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환합니다.
$("이벤트 대상 선택").on("이벤트 종류", function(){
$("이벤트 대상 선택").index(this);
});
그룹 이벤트 등록 및 삭제하기
단독이벤트가 아닌 그룹으로 여러 개의 이벤트를 등록하는 메서드입니다. 이미 등록된 이벤트를 삭제하는 메서드도 살펴볼 것입니다.
| 종류 | 설명 |
| on() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. 이벤트를 등록한 이후에도 '동적'으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. |
| bind() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. |
| delegate() | 선택한 요소의 하위 요소에 이벤트를 등록합니다. 이벤트를 등록한 이후에도 '동적'으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. |
| one() | (이벤트 대상 요소에 1개 이상의 이벤트를 등록합니다.) 지정한 이벤트가 1회 발생하고 자동으로 해제됩니다. |
앞에서 배운 이벤트 등록 방식으로는 객체 조작 메서드에 의해 새로이 생성, 복제된 요소에 이벤트를 등록할 수 없습니다. on() 메서드는 '라이브 이벤트 등록 방식'으로 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. one() 메서드도 특정 방식으로 라이브 이벤트를 등록할 수 있습니다.
$([document | "이벤트 대상의 상위 요소 선택"]).on("이벤트 종류", "이벤트 대상 선택", function(){
자바스크립트 코드;
});$([document | "이벤트 대상의 상위 요소 선택"]).delegate("이벤트 대상 요소 선택", "이벤트 종류", function(){
자바스크립트 코드;
});// 기본 이벤트 등록 방식
$("이벤트 대상 요소 선택").one("이벤트 종류", function(){
자바스크립트 코드;
});
// 라이브 이벤트 등록 방식
$([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 선택", function(){
자바스크립트 코드;
});
이벤트 제거 메서드
이벤트 등록 메서드에 따라 이벤트를 해제하는 방법이 달라집니다. 기본 이벤트를 제거하느냐 라이브 이벤트를 제거하느냐에 따라서도 그렇습니다.
| 종류 | 설명 |
| off() | on() 메서드로 등록한 이벤트 제거 |
| unbind() | bind() 메서드로 등록한 이벤트 제거 |
| undelegate() | delegate() 메서드로 등록한 이벤트 제거 |
// 기본 이벤트 제거
$("이벤트 대상 요소 선택").off("이벤트 종류");
$("이벤트 대상 요소 선택").unbiind("이벤트 종류");
$("이벤트 대상 요소 선택").delegate("이벤트 종류");
// 라이브 이벤트 제거
$([document | "이벤트 대상의 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 선택");
$([document | "이벤트 대상의 상위 요소 선택"]).undelegate("이벤트 대상 선택", "이벤트 종류");
추가 실습 : 제이쿼리 글자 확대, 축소 버튼 만들기
본 내용은 DO IT! 자바스크립트+제이쿼리 입문 도서를 참고하여 공부하며 요약해본 것입니다.
'Javascript > JQuery' 카테고리의 다른 글
| 제이쿼리 textarea 텍스트 입력 영역 비활성화, 활성화 (0) | 2020.02.21 |
|---|---|
| 선택한 요소 판별해서 value 가져오기 (0) | 2020.02.19 |
| jQuery 제이쿼리 탐색 선택자 (5) | 2019.12.21 |
| [jQuery] Ajax로 xml 파싱하기 (2) | 2019.12.16 |
| jQuery 제이쿼리 문서 객체 선택자 (2) | 2019.12.06 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
