event.target
원문 링크 
http://api.jquery.com/event.target/
개요 : 이벤트가 시작되는 DOM 요소입니다.
- .event.target
예 제
클릭하면 태그명을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
span, strong, p {
padding: 8px; display: block; border: 1px solid #999; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
<script>$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
}); </script>
</body>
</html>미리보기
예 제
간단한 이벤트 위임을 구현합니다. 클릭하면 하위요소가 나타나거나 감춰집니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
<script>function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
}
$("ul").click(handler).find("ul").hide();</script>
</body>
</html>미리보기
이거이거 토글메뉴에 딱인데요.
두번째 예제를 잘 살려서 토글 메뉴에 사용하심 될 것 같습니다. 와우 간단하네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - keydown(), 키보드 누름 이벤트 (2) | 2011.12.26 |
|---|---|
| jQuery API 정복 - hover(), 마우스 오버 이벤트 (0) | 2011.12.26 |
| jQuery API 정복 - focus(), 요소에 포커스 주기 (0) | 2011.12.13 |
| jQuery API 정복 - event.timeStamp, 이벤트 사이의 시간 (0) | 2011.12.13 |
| jQuery API 정복 - event.pageY, 마우스 Y 좌표 (0) | 2011.12.13 |
| jQuery API 정복 - event.pageX, 마우스 X 좌표 (0) | 2011.12.13 |
| jQuery API 정복 - die(), 이벤트 해제하기 (2) | 2011.12.08 |
| jQuery API 정복 - delegate(), 이벤트 바인딩하기 (1) | 2011.12.08 |