728x90
반응형
[ 목차 ]
1. 이벤트 등록 메서드
2. 자주 사용되는 기타 이벤트 메서드
3. 그룹 이벤트 등록 및 삭제하기
* // jq
$("#box#).css("color","red");
< a href="#" id="btn" onclick="function( );"> 버튼</a>
<script>
document.querySelector("#btn).onclic=function( ) { // 처리 실행문 };
1. 이벤트 등록 메서드
[ 1. 이벤트 등록 메서드란 ]
[ 2. 로딩 이벤트 메서드 ]
(1) ready( ) / load( ) 이벤트 메서드
* ready( ) : 이벤트 함수
// 기본형
$(문서 객체).ready(function(){
실행문;
});
$("이미지 또는 프레임").load(function(){
실행문;
});
//jquery_event_1_test.html
<!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>
</head>
<body>
<div id="wrap"></div>
<iframe src="http://www.easyspub.com/" frameborder="0"
width="300" height="200"></iframe>
<!-- iframe 태그 : 지정 프레임에 src 소스를 넣는 태그 -->
<script type="text/javascript">
//<![CDATA[
$("iframe").load(function(){ // iframe 태그가 다 실행이 되면 function()이 실행된다.
$("#wrap").append("<p>로딩완료</p>");
});
$(document).ready(function() {
$("#wrap").append("<p>레디완료</p>");
})
//]]>
</script>
</body>
</html>
[ 3. 마우스 이벤트 ]
(1) click()/dblclick() 이벤트 메서드
// jquery_event_2_test.html
<!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[
//$(document).ready(function(){
$(function () {
$("#btn1").click(function() { // id=btn1 요소인 아이를 click 하면 function이 실행된다.
$("p").css("background-color", "yellow");
});
$("#btn2").dblclick(function() { // id=btn2 요소인 아이를 더블click 하면 function이 실행된다.
$("p").css("background-color", "blue");
});
// $("#btn2").dblclick(); - id=btn2 요소인 아이를 강제로 더블클릭 시킨 것,,?
});
//]]>
</script>
</head>
<body>
<button id="btn1">click</button>
<button id="btn2">dblclick</button>
<p>내용</p>
<a href="#prev">버튼</a>
</body>
</html>
(2) click( ) / dblclick( ) 이벤트 메서드를 <a> 태그에 등록할 때 주의할 점
- 링크된 주소로 이동되지 않도록 만들어야 하는데, 다음 두 가지 방식을 이용해 링크 주소로 이동되는 것을 차단할 수 있다.
// jquery_event_3_test.html
<!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() {
$("p").css("background-color", "purple");
// id=btn1 요소인 버튼1을 클릭 한번 하게되면 function이 실행되면서 고유한 페이지가 이동된다.
return false;
// return false 해주면 배경색이 바뀌고도 페이지가 이동되지 않는다. 즉, <a> 태그에 링크 기능을 차단시킨다.
});
$("#btn2").click(function(e) {
e.preventDefault(); // <a> 태그에 링크 기능을 차단시킨다.
$("p").css("background-color", "yellow");
});
});
//]]>
</script>
</head>
<body>
<a href="http://w3.org/" id="btn1">버튼1</a><br /><br />
<a href="http://w3.org/" id="btn2">버튼2</a><br /><br />
<a href="http://w3.org/" id="btn3">버튼3</a><br /><br />
<p>내용</p>
</body>
</html>
(3) mouseover( ) / mouseout( ) / hover( ) 이벤트 메서드
* 이 부분은 이번에는 지나가기로,,
[ 5. 키보드 접근성 위한 이벤트 등록법 ]
- 키보드 접근성이란 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을
키보드만으로 사용할 수 있도록 보장하는 것을 말한다.
/* 키보드 접근성을 배려하지 않은 이벤트 예제 */
<button id="btn">노출 버튼</button>
<p style-"display:none">내용1</p>
$("#btn").mouseover(function(){
$(this).next().css("display","block");
});
/* 키보드 접근성을 배려한 이벤트 적용 예시 */
// 방법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");
});
// jqeury_event_11_test.html
2. 자주 사용되는 기타 이벤트 메서드
[ 1. change() 이벤트 메서드 ]
* 어떤 이벤트가 실행되면 바뀌는 메서드
// jqeury_event_9_test.html
<!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 () {
$("#rel_site").change(function() {
$("#txt").text($(this).val()); // this : 이벤트가 발생한 것 즉, change 한것
// 예를 들어 네이트 로 change 바꾸게되면 네이트의 value값 "www.nate.com"을 id=txt 속성인 부분에 입력되게 한다.
});
});
//]]>
</script>
</head>
<body>
<select id="rel_site">
<option value="">사이트 선택</option>
<option value="www.naver.com">네이버</option>
<option value="www.nate.com">네이트</option>
<option value="www.daum.net">다음</option>
</select>
<p id="txt"></p>
</body>
</html>
[ 3. 이벤트가 발생한 요소 추적하기 ]
(1) $(this) 선택자
// jquery_event_this_test.html
<!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 () {
$("#btn").mouseover(function() {
$(this).css("border", "2px solid red"); // this : 이벤트가 발생한 요소를 가져온다.
$(this).text("MouseOver"); // 여기에서 this 는 id=btn인 <bytton>마우스오버 를 의미한다.
});
});
//]]>
</script>
</head>
<body>
<button id="btn">마우스 오버</button>
</body>
</html>
3. 그룹 이벤트 등록 및 삭제하기
[ 1. 그룹 이벤트 등록 메서드 ]
(1) on() 이벤트 등록 메서드
- 여러 개의 이벤트를 등록할 때 사용한다.
* 동적으로 생성된 새 요소에 이벤트가 적용된다.
// jquery_event_12_test.html
<!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 () {
$("h1 a").on("click", function(){
alert("클릭했습니다.");
return false; // <a> 태그의 링크 이동을 제어한다.
});
$("h1 a").on("mouseOver focus", function() { // mouseOver 또는 focus(탭이 이동되는 것) 이벤트
$(this).css("font-color", "red"); // this : <a> 태그를 의미한다.
});
$("h1 a").on("mouseOut blur", function() { // mouseOut(마우스가 밖으로 빠지는 것) 또는 blur(탭 하는 것..?) 이벤트
$(this).css("color", "yellow");
});
});
//]]>
</script>
</head>
<body>
<h1><a href="#">버튼</a></h1>
<h2></h2>
</body>
</html>
// jquery_event_12_test.html ( on( ) 메서드와 bind( ) 메서드 차이 )
<!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 () {
/*
$(document).on("mouseover focus", "h2 a", function() {
$(this).css("background-color", "yellow");
});
*/
/*
$("h1 a").bind("mouseover focus", function() { // 적용됨(h1태그는 동적요소x)
$(this).css("background-color", "yellow");
});
*/
$(document).bind("mouseover focus", "h2 a", function() { // 적용안됨(h2태그는 동적요소o)
$(this).css("background-color", "yellow");
});
$("h2").append("<a href='#'>생성된 요소</a>"); // 동적으로 생성된 새로운 요소
});
//]]>
</script>
</head>
<body>
<h1><a href="#">버튼</a></h1>
<h2></h2>
</body>
</html>
(2) bind() 이벤트 등록 메서드
- on()과 비슷하게 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있으나
동적으로 생성된 새 요소에는 이벤트가 적용되지 않는다.
* 이러한 단점을 가진 bind( ) 메서드를 보완하기 위해 on( ) 메서드가 생겨나고
그러면서 기능이 확장되어 bind( ) 메서드도 동적으로 생성된 새 요소에 이벤트 적용이 되게 된다.
그러고는 서서히 bind( ) 메서드는 사라져간다,,,,
// jquery_event_13_test.html
<!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 () {
$("h1 a").bind("mouseOver focus", function() {
$(this).css("background-color", "yellow");
});
});
//]]>
</script>
</head>
<body>
<h1><a href="#">내용</a></h1>
</body>
</html>
(3) delegate() 이벤트 등록 메서드
- 선택한 요소의 하위 요소에 여러 개의 이벤트를 등록할 수 있다.
그리고 이벤트를 등록한 이 후에 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록된다.
,, 이 이후는 다음에 continue ,,,,,,
// jquery_event_14_test.html
<!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 () {
// $("h1").delegate("a", "mouseOver focus", function() { // <h1> 태그 아래로 <a> 태그가 생기게 되었을대 mouseOver 또는 focus 이벤트가 수행되면 function이 실행된다.
// $(this).css("background-color", "yellow");
// });
$("h1").html("<a href='#'>내용</a>"); // 동적으로 생긴 <a>태그 생성
// --> on() 메서드는 이 동적<a>태그에 적용시킬 수 있지만 bind() 메서드는 이 동적<a>태그에 스타일을 적용시킬 수 없다.
// 위의 코드로 인해 h1태그의 하위태그인 a태그가 만들어졌다. 그 만들어진 a태그에 대한 코드가 바로 아래에 나온다.
// $("h1 a").on("click", function() {
// $(this).css("background-color", "lightblue");
// });
$("h1 a").bind("click", function() {
$(this).css("background-color", "lightblue"); // 왜,, 적용이 되는거지,,,?
});
});
//]]>
</script>
</head>
<body>
<h1></h1>
</body>
</html>
// jquery_event_16_test.html
<!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 () {
var num = 0;
$("button").one("click", function() { // click 이벤트가 한번만 발생 --> num 한번만 증가
num++;
$("p").text(num);
});
/*
$("button").one("click", function() { // click 이벤트가 여러번 발생 --> num 계속 증가
num++;
$("p").text(num);
});
*/
});
//]]>
</script>
</head>
<body>
<button>증가 버튼</button>
<p>0</p>
</body>
</html>
// jquery_event_15_test.html
<!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 () {
$("h1 a").on("mouseover focus", function() {
$(this).css("background-color", "lightpink");
});
$("button").on("click", function() {
$("h1 a").off();
});
// <button>이벤트삭제 버튼을 먼저 누르고나서 h<1><a>내용 에 마우스를 갖다대면
// 위에서 지정한 기능(마우스 갖다대면 배경색이 연핑크로 바뀌는 기능)이
// off() 메서드로 인해 삭제되어 마우스를 가져다대도 배경색이 연핑크로 안바뀐다.
});
//]]>
</script>
</head>
<body>
<h1><a href="#">내용</a></h1>
<button>이벤트 삭제</button>
</body>
</html>
728x90
반응형
'Language > JavaScript' 카테고리의 다른 글
| 08_ 제이쿼리 비동기 방식 연동 (2) | 2023.01.14 |
|---|---|
| 06_제이쿼리 문서 객체 선택자와 조작법 (0) | 2023.01.12 |
| 05장(2)_ 문서 객체 모델(DOM) (0) | 2023.01.11 |
| 05장(1)_ 문서 객체 모델(DOM) (0) | 2023.01.11 |
| 04장_자바스크립트와 객체 (0) | 2023.01.10 |
