728x90
반응형

event.target

원문 링크 http://api.jquery.com/event.target/

event.targetReturns : Element

개요 : 이벤트가 시작되는 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
반응형
블로그 이미지

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

,