제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (3)
제이쿼리(jQuery) 기초 문법
제이쿼리 이벤트
이벤트가 발생한 요소 추적하기
사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해오는 방법에대해 알아보자. 이벤트가 발생한 요소를 선택해 오는 선택자 $(this)의 사용법과 이벤트가 발생한 요소의 인덱스 값을 반환하는 index() 인덱스 반환 메소드도 알아보자.
$(this)선택자
이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있다.
<body>
<ul id="menu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<script>
$("#menu>li>a").on("click",function(){
$(this).css("color","green");
});
</script>
</body>
id 속성값이 'menu'인 요소의 <a>요소를 선택하여 click 이벤트를 등록하는 코드이다. 만약 메뉴1을 클릭하면 이벤트 핸들러에 사용된 $(this)는 이벤트가 발생한 <a href="#">메뉴1</a>를 선택한다.
index() 인덱스 반환 메소드
index() 인덱스 반환 메소드는 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환한다.
<body>
<ul id="menu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<p class="idxNum"></p>
<script>
$("#menu>li>a").on("click",function(){
var idx=$("#menu li a").index(this);
$(".idxNum").text(idx);
});
</script>
</body>
index() 메소드가 이벤트 대상인 <a>요소 중 click 이벤트가 발생한 <a>의 인덱스 값을 idx에 대입해 p태그 부분쪽에 보여주는 코드이다. 인덱스는 0부터 시작한다.
그룹 이벤트 등록 및 삭제
그룹 이벤트 등록 메소드
그룹 이벤트 등록 메소드를 사용하면 한 번에 2개 이상의 이벤트를 등록할 수 있다. 선택한 요소에 이벤트 등록 메소드를 한 번만 적용하여 '마우스 포인터를 올렸을 때'와 '포커스가 생성되었을 때'처럼 두 종류의 이벤트가 발생하도록 만들 수 있다.
그룹 이벤트 등록 메소드 종류
| 종류 | 설명 |
| on() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다. |
| bind() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. |
| delegate() | 선택한 요소의 하위 요소에 이벤트를 등록한다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다. |
| one() | 이벤트 대상 요소에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1회 발생하고 자동으로 해제된다. |
on() 메소드
on() 메소드는 선택한 요소에 이벤트를 등록한 이후에도 새롭게 생성되거나 복제된 요소에 이벤트를 적용할 수 있다. 동적으로 생성되거나 복제된 요소에도 이벤트가 등록된다. 동적으로 생성된 요소에도 이벤트가 등록되는 on()메소드의 라이브 이벤트 등록 방식의 기본형은 아래와 같다.
<script>
$([document|"이벤트 대상의 상위 요소 선택"]).on("이벤트 종류","이벤트 대상 선택",
function(){
자바스크립트 코드;
});
$(funtion(){
$(".btn_1.on").on("mouseover focus",funtion(){
alert("HELLO!");
});
$(".btn_1").addClass("on");
//이벤트를 등록하고 class값을 생성하면 이벤트가 정상적으로 등록되지 않는다.
$(document).on("mouseover focus",".btn_2.on",function(){
alert("WELCOME");
});
$(".btn_2").addClass("on");
//라이브 이벤트 등록 방식으로 이벤트를 등록한 다음
//class값을 생성하면 이벤트가 정상적으로 등록된다.
});
</script>
</head>
<body>
<div id="wrap">
<p><button class="btn_1">버튼1</button></p>
<p><button class="btn_1">버튼2</button></p>
</body>
delegate()/one() 이벤트 등록 메소드
해당 메소드들의 기본형은 아래와 같다.
<script>
//delegate()
$([document|"이벤트 대상의 상위 요소 선택"]).delegate("이벤트 대상 요소 선택","이벤트 종류",
function(){
자바스크립트 코드;
});
//one()
$([document|"이벤트 대상의 상위 요소 선택"]).one("이벤트 종류","이벤트 대상 요소 선택",
function(){
자바스크립트 코드;
});
</script>
이벤트 제거 메소드
이벤트 제거 메소드를 사용하면 이전에 등록된 이벤트를 제거할 수 있다.
| 종류 | 설명 |
| off() | on()메소드로 등록한 이벤트를 제거한다. |
| unbind() | bind()메소드로 등록한 이벤트를 제거한다. |
| undelegate() | delegate() 메소드로 등록한 이벤트를 제거한다. |
off(), unbind(), undelegate()로 이벤트 해제
<script>
//on() 이벤트 해제를 위한 off()메소드
$("이벤트 대상 요소 선택").off("이벤트 종류");//기본 이벤트 제거 방식
$([document|"이벤트 대상 상위 요소 선택"]).off("이벤트 종류","이벤트 대상 요소 선택");//라이브 이벤트 제거 방식
//bind() 이벤트 해제를 위한 unbind() 메소드
$("이벤트 대상 요소 선택").unbind("이벤트 종류");
//delegate() 이벤트 해제를 위한 undelegate() 메소드
$("이벤트 대상 요소 선택").delegate("이벤트 종류");//기본 이벤트 제거 방식
$([document|"이벤트 대상 상위 요소 선택"]).undelegate("이벤트 대상 선택","이벤트 종류");//라이브 이벤트 제거 방식
</script>