SeouliteLab

jQuery .context 속성: 이벤트 처리 및 선택된 요소의 컨텍스트 확인하기 본문

프로그래밍

jQuery .context 속성: 이벤트 처리 및 선택된 요소의 컨텍스트 확인하기

Seoulite Lab 2024. 4. 9. 08:42

예제 1: .context 속성 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .context 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var context = $("p").context;
      console.log(context);
      // 결과 확인을 위해 콘솔에 출력
    });
  </script>
</head>
<body>

<p>첫 번째 단락</p>
<p>두 번째 단락</p>
<p>세 번째 단락</p>

</body>
</html>

설명:

위 예제에서는 jQuery .context 속성을 사용하여 선택된 요소의 컨텍스트를 확인하는 방법을 보여줍니다.

  • $("p") 선택자를 사용하여 모든 p 요소를 선택합니다.
  • .context 속성을 사용하여 선택된 요소의 컨텍스트를 가져옵니다.
  • 컨텍스트는 DOM 요소이며, 결과는 콘솔에 출력됩니다.

예제 2: .context 속성을 이용한 이벤트 처리

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .context 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").on("click", function(event){
        var context = event.delegateTarget;
        console.log(context);
        // 클릭된 요소의 컨텍스트를 콘솔에 출력
      });
    });
  </script>
</head>
<body>

<p>첫 번째 단락</p>
<p>두 번째 단락</p>
<p>세 번째 단락</p>

</body>
</html>

설명:

이 예제에서는 .context 속성을 이용하여 이벤트 처리를 하는 방법을 보여줍니다.

  • $("p").on("click", ...)을 사용하여 모든 p 요소에 클릭 이벤트 핸들러를 등록합니다.
  • 클릭 이벤트 핸들러 내에서 event.delegateTarget을 사용하여 이벤트가 발생한 요소의 컨텍스트를 가져옵니다.
  • 컨텍스트는 DOM 요소이며, 클릭된 요소의 컨텍스트를 콘솔에 출력합니다.

jQuery .context 속성을 사용하면 선택된 요소의 컨텍스트를 확인할 수 있습니다. 이를 활용하여 이벤트 처리나 선택된 요소에 대한 정보를 더욱 효과적으로 다룰 수 있습니다. 위 예제를 통해 .context 속성의 활용법을 익혀보세요.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery.support: 브라우저 기능 지원 여부 확인하기  (0) 2024.04.09
jQuery.browser: 브라우저 정보 확인하기  (0) 2024.04.09
jQuery .offsetParent() 메소드: 위치 기준이 되는 부모 요소 찾기  (0) 2024.04.09
jQuery .size() 메소드: 요소의 개수 확인하기  (0) 2024.04.09
jQuery.param() 메소드: 객체를 쿼리 문자열로 변환하기  (0) 2024.04.09
'프로그래밍' Related Articles more