안녕하세요 jju_developer입니다.
이번시간에는 제이쿼리(jQuery)에서의 이벤트 등록 메서드 및 키보드와 이벤트의 개념에 대한 설명입니다~!
1. 이벤트 등록 메서드
이벤트 등록 메서드란?
앞서 자바스크립트 이벤트에서 보았다시피 사이트에 방문자가 취하는 모든 행위를 이벤트라 하며,
이벤트가 발생했을 때 실행하는 실행문을 이벤트 핸들러라고 합니다.
이벤트 등록 메서드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 실행문을 실행시킬 수 있습니다.
| 구분 | 종류 | 설명 |
| 로딩 이벤트 |
load() | 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료 된 후 이벤트가 발생 |
| ready() | 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생 | |
| error() | 이벤트 대산 요소에서 오류가 발생하면 이벤트가 발생 | |
| 마우스 이벤트 |
click() | 선택한 요소를 클릭했을 때 이벤트 발생 |
| dbclick() | 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트 발생 | |
| mouseout() | 선택 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생(하위요소의 영향) | |
| mousehover() | 선택 요소의 영역에 마우스 포인터 올렸을 때 이벤트 발생 | |
| hover() | 선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생 | |
| mousedown() | 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생 | |
| mouseup() | 선택한 요소 범위에 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생 | |
| mouseenter() | 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생 | |
| mouseleave() | 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생 | |
| mousemove() | 선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생 | |
| scroll() | 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생 | |
| 포커스 이벤트 |
focus() | 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스 생성 |
| focusin() | 선택한 요소에 포커스가 생성되었을 때 이벤트 발생 | |
| focusout() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생 | |
| blur() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 함 | |
| change() | 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생. 그리고 강제로 change 이벤트를 발생시킬 때도 사용. | |
| 키보드 이벤트 |
keyoress() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 문자키를 제외한 키의 코드값 반환 |
| keydown() | 선택한 요소에서 키보드를 눌렀을 때 이벤트 발생. 키보드의 모든 기의 코드값을 반환 | |
| keyup() | 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생. |
1-1. 로딩 이벤트 메서드 예시
(1) ready() / load() 이벤트 메서드
기본형:
$(문서 객체).ready(function(){ 실행문; });
$("이미지 또는 프레임").load(function(){ 실행문; });
iframe은 크기를 조정하는 것 입니다.
frame안에 창크기를 변경할 수 있습니다.
<script type="text/javascript">
//<![CDATA[
$("iframe").load(function () {
$("#wrap").append("<p>로딩완료</p>");
});
$(document).ready(function () {
$("#wrap").append("<p>레디완료</p>");
});
//]]>
</script>iframe은 실제로 데이터를 다 가지고 와야 load라는 이벤트가 끝나기 때문에
load의 속도가 ready보다 느립니다.
그래서 ready가 먼저 완료가 되고, load가 완료되는 것을 알 수 있습니다.
1-2. click()/dblclick() 이벤트 메서드 예시
// 기본형
$(요소 선택).click(function(){...});
$(요소 선택).click();
$(요소 선택).on("dblclick",function(){...});
$(요소 선택).dblclick();
클릭이벤트를 만들고 그 안에 function을 만들어 보겠습니다~!
-> 클릭 시 <p>태그가 핑크로 변경되었습니다.
또한 클릭시 두 번 클릭 시 색이 강제 변경되도록 설정도 가능합니다.
<전체 코드>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> 이벤트 </title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
$("#btn1").click(function () { //<button id="btn1">을 클릭했을 때...
$("p").css("background-color", "yellow");
});
$("#btn2").dblclick(function () { //<button id="btn2">을 더블클릭했을 때...
$("p").css("background-color", "pink");
});
$("#btn2").dblclick(); //<button id="btn2">을 강제로 더블클릭 이벤트 발생.
});
//]]>
</script>
</head>
<body>
<button id="btn1">click</button>
<button id="btn2">dblclick</button>
<p>내용</p>
<a href="#prev">버튼</a>
</body>
</html>
※ click()/dblclick() 이벤트 메서드를 <a> 태그에 등록할 때 주의할 점
링크된 주소로 이동되지 않도록 만들어야 하는데,
다음 두 가지 방식을 이용해 링크 주소로 이동되는 것을 차단할 수 있다.
//1. return false 링크 차단 메서드 사용하기
$("a").click(function(){ 실행문; return false; });
//2. preventDefault() 링크 차단 메서드 사용하기
$("a").click(function(e){ e.preventDefault(); 실행문; });
*(e)는 이벤트 객체에 대한 e입니다 ^.^
1-3. mouseover()/mouseout()/hover() 이벤트 메서드
// 기본형
$(요소 선택).mouseover(function(){...});
$(요소 선택).mouseover();
$(요소 선택).mouseout(function(){...});
$(요소 선택).mouseout();
$(요소 선택).hover(
function(){실행문(1)},
function(){실행문(2)} });
2. 키보드 접근성 위한 이벤트 등록법
키보드 접근성이란?
마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을
키보드만으로 사용할 수 있도록 보장하는 것을 말합니다.
마우스가 없을 때도 있으니까~ 키보드 접근성을 배려해서 이벤트를 적용해야겠죠?
focus는 tab키로 접근이 가능하기 때문에 on을 쓰거나 focus로 키보드 접근성을 배려할 수 있습니다.
// 방법1
$("#btn").mouseover(function(){
$(this).next().css("display","block"); });
$("#btn").focus(function(){
$(this).next().css("display","block"); });
// 방법2
$("#btn").on("mouseover focus",function(){
$(this).next().css("display","block"); });
3. 자주 사용되는 기타 이벤트 메서드
3-1 change() 이벤트 메서드
중략..
※여기서 ($(this).val())란 뭘까요?
선택한 자기 자신을 의미합니다.
select로 변경이 되면, 그 자신의 사이트의 txt를 가져오라는 뜻입니다.
3-2 이벤트가 발생한 요소 추적하기
(1) $(this) 선택자
이벤트가 발생한 요소를 선택해 온다.
// 기본형
$(요소 선택).이벤트(function(){
$(this)
});
<p><a href="#" id="btn">버튼</a></p>
$("#btn").click(function(){
$(this).css("color","red");
});
마우스를 위로 올리게 되면 text가 변경됩니다.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#btn").mouseover(function() { //버튼에 마우스를 올릴 때 마다...
$(this).css("border", "2px solid red"); //버튼에 선을 생성합니다.
$(this).text("MouseOver"); //버튼에 텍스트를 "MouseOver"로 바꿉니다.
});
});
//]]>
</script>
</head>
<body>
<button id="btn">마우스 오버</button>
</body>
</html>$(this)는 button을 의미하며, butto에 있는 text를 바꿔줍니다.
4. 그룹 이벤트 등록 및 삭제하기
| 종류 | 설명 |
| on() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. 이벤트를 등록한 이후에도 '동적'으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. |
| bind() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. |
| delegate() | 선택한 요소의 하위 요소에 이벤트를 등록합니다. 이벤트를 등록한 이후에도 '동적'으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. |
| one() | (이벤트 대상 요소에 1개 이상의 이벤트를 등록합니다.) 지정한 이벤트가 1회 발생하고 자동으로 해제됩니다. |
단독이벤트가 아닌 그룹으로 여러 개의 이벤트를 등록하는 메서드입니다. 이미 등록된 이벤트를 삭제하는 메서드도 살펴볼 것입니다.
앞에서 배운 이벤트 등록 방식으로는 객체 조작 메서드에 의해 새로이 생성, 복제된 요소에 이벤트를 등록할 수 없습니다.
on() 메서드는 '라이브 이벤트 등록 방식'으로 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다.
one() 메서드도 특정 방식으로 라이브 이벤트를 등록할 수 있습니다.
<on() 메서드>
$(function(){
$("h1 a").on("click",function(){});
//$("h1 a").click으로 안하고 on을 사용합니다.
});
또 다른 기능을 추가해 볼까요?
이번에는 버튼 글자에 마우스를 대보면 어떻게 변하게 해 볼까요?
tab키로도 (키보드) 접근하면 동일하게 색을 변경하도록 코딩했습니다.
(2) bind() 이벤트 등록 메서드
on()과 비슷하게 선택한 요소에 한 개 이상의 이벤트를 등록하나, 동적으로 생성된 새 요소에는 이벤트가 적용되지 않았었습니다. 하지만 현재는 업데이트되어 on과 동일하게 역할을 합니다.
요즘은 bind보다는 on을 권장한다고 합니다.
bind() : 여러 개의 이벤트를 묶어주는 기능 => mouseenter + mouseleave
예) 해당되는 h2 영역(이벤트가 적용되는 this)에 마우스를 올리면 배경이 파란색, 글씨가 흰색으로 바뀌고 마우스를 거두면 효과가 사라진다.
// 기본형
$(요소 선택).bind("이벤트 종류1, 이벤트 종류2, ..., 이벤트 종류n", function(){...});
$(function(){
$("h1 a").bind("mouseover focus", function() {
$(this).css("background-color", "yellow");
});
});
(3) delegate() 이벤트 등록 메서드
선택한 요소의 하위 요소에 여러 개의 이벤트를 등록할 수 있습니다.
그리고 이벤트를 등록한 이후에 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됩니다.
// 기본형
$(상위 요소 선택).delegate("하위 요소 선택","이벤트 종류1, 이벤트 종류2, ..., 이벤트 종류n", function(){...});
$(function(){
$("h1").delegate("a", "mouseover focus", function() {
$(this).css("background-color", "yellow");
});
$("h1").html("<a href='#'>내용</a>");
});
//]]>
</script>
</head>
<body>
<h1></h1>
</body>이렇게 <h1>에 a태그가 없어서 마우스를 올렸을 때 동작할 수 있는 것이 없습니다.
그렇기 때문에 $("h1").html("<a href='#'>내용</a>"); 이렇게 해주면서 a 태그와 들어갈 내용을 추가해 주게 됩니다.
원래는 문서가 없는데 제이쿼리로 인해 동적으로 새롭게 문서가 생성된 것을 볼 수 있습니다~!!!!!
그렇다면!
on을 쓰면 바뀌는데
똑같은 코드에서 on -> bind로 쓰면 코드가 먹히지 않습니다.
bind는 동적으로 생긴 것에는 반응을 하지 않습니다.
(4) one() 이벤트 등록 메서드
(이벤트 대상 요소에 1개 이상의 이벤트를 등록합니다.)
지정한 이벤트가 1회 발생하고 자동으로 해제됩니다.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
let num = 0;
$("button").one("click", function () {
num++;
$("p").text(num);
}) });//]]>
$("button").one("click", function () {
여기서 one을 사용했기 때문에 증가버튼을 계속 누르더라도 숫자는 증가하지 않습니다.
반대로 on을 쓰면 클릭을 하는 수만큼 증가합니다!!!
5. 이벤트 제거 메서드
(1) off() 이벤트 제거 메서드
선택한 요소에 등록된 이벤트를 제거합니다.
// 기본형
$(요소 선택).off();
$(요소 선택).off("이벤트 종류");
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
$("h1 a").on("mouseover focus", function () {
$(this).css("background-color", "yellow");
});
$("button").on("click", function () {//버튼을 클릭했을 때
$("h1 a").off();
});
});
//]]>
</script>위 코드는 삭제를 하기 전에 이벤트를 실행하면 삭제가 안되지만,
삭제를 하고 나서 이벤트 (마우스오버)를 하면 이벤트가 삭제되어 실행되지 않습니다.
그럼 지금까지 제이쿼리에서의 다양한 이벤트와 그 이벤트 등록하는 메서드, 마우스, 키보드를 통한 메서드 등록 방법 및 개념에 대한 설명이었습니다.
기초를 다진다는 편한 마음으로 보시면 됩니다~!
그럼 오늘도 수고하셨습니다☆
'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 비동기 방식 연동, Apache Tomcat설명 및 Ajax 중요 메서드 설명 (1) | 2023.01.14 |
|---|---|
| ⭐지식공유⭐_클라이언트 사이드와 서버 사이드의 개념과 차이점 Client-side / Server-side & Ajax 장단점, 구성요소 총정리!!! (4) | 2023.01.14 |
| 제이쿼리(jQuery) 객체 조작, 속성 조작 메서드 (0) | 2023.01.12 |
| 제이쿼리(jQuery) 선택자와 함께 사용하면 편리한 메서드들 (0) | 2023.01.12 |
| 제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명 (2) | 2023.01.12 |