728x90
반응형
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 에 있는 내용임을 밝힙니다.
728x90
반응형
'JQUERY' 카테고리의 다른 글
| [javascript] split 사용하기 (0) | 2014.04.04 |
|---|---|
| jquery selectbox(중요) (0) | 2014.04.04 |
| .is() 와 .next() 에 대해 (0) | 2014.04.04 |
| JQUERY 참조 블로그 (0) | 2014.04.04 |
| jQuery event target (0) | 2014.04.04 |
| table 태그로 표를 간단하게 (레이아웃 작성용 아닙니다) (0) | 2014.03.18 |
| jquery .hover (마우스오버와 마우스아웃) (0) | 2014.03.18 |
| [jQuery 강좌] 10강 클래스 추가 및 삭제하기 addClass() removeClass() (0) | 2014.03.18 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!