SeouliteLab

jQuery event.target 속성 이해하기: 이벤트가 발생한 요소 식별하기 본문

프로그래밍

jQuery event.target 속성 이해하기: 이벤트가 발생한 요소 식별하기

Seoulite Lab 2024. 4. 3. 08:06

event.target 속성은 jQuery에서 이벤트 핸들러 내에서 호출되었을 때, 이벤트가 발생한 요소를 가리킵니다. 이를 통해 이벤트가 발생한 요소를 식별하고 해당 요소에 대한 작업을 수행할 수 있습니다.

예제 1: 기본 사용법

<!DOCTYPE html>
<html>
<head>
  <title>event.target 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("div").on("click", function(event){
        alert("이벤트가 발생한 요소: " + event.target.tagName);
      });
    });
  </script>
</head>
<body>
  <div>클릭하세요</div>
</body>
</html>

출력 결과: 이벤트가 발생한 요소: DIV

설명: 이 예제에서는 <div>를 클릭했을 때, 이벤트가 발생한 요소인 <div>의 태그 이름을 알려줍니다.

예제 2: 중첩된 요소에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.target 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#outer").on("click", function(event){
        alert("이벤트가 발생한 요소: " + event.target.id);
      });
    });
  </script>
</head>
<body>
  <div id="outer" style="padding: 20px; background-color: #f0f0f0;">
    <div id="inner" style="padding: 10px; background-color: #ccc;">내부 요소</div>
  </div>
</body>
</html>

출력 결과: 이벤트가 발생한 요소: inner

설명: 이 예제에서는 내부 요소를 클릭했을 때, 이벤트가 발생한 요소의 ID인 inner를 알려줍니다.

예제 3: 여러 이벤트 타입에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.target 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#target").on("click mouseover", function(event){
        alert("이벤트가 발생한 요소: " + event.target.tagName);
      });
    });
  </script>
</head>
<body>
  <div id="target" style="width: 100px; height: 100px; background-color: #f0f0f0;"></div>
</body>
</html>

출력 결과: 이벤트가 발생한 요소: DIV

설명: 이 예제에서는 여러 이벤트 유형(click 및 mouseover)에 대해 하나의 핸들러가 등록되어 있습니다. 핸들러에서 이벤트가 발생한 요소의 태그 이름을 알려줍니다.

예제 4: 이벤트 위임에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.target 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#container").on("click", function(event){
        alert("이벤트가 발생한 요소: " + event.target.tagName);
      });
    });
  </script>
</head>
<body>
  <div id="container">
    <button>버튼</button>
  </div>
</body>
</html>

출력 결과: 이벤트가 발생한 요소: BUTTON

설명: 이 예제에서는 이벤트 위임을 사용하여 버튼 클릭에 대한 핸들러를 등록했습니다. 컨테이너를 클릭하면 이벤트가 발생한 요소의 태그 이름을 알려줍니다.

예제 5: 여러 요소에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.target 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").on("click", function(event){
        alert("이벤트가 발생한 요소: " + event.target.textContent);
      });
    });
  </script>
</head>
<body>
  <button>첫 번째 버튼</button>
  <button>두 번째 버튼</button>
</body>
</html>

출력 결과: 이벤트가 발생한 요소: 첫 번째 버튼 또는 이벤트가 발생한 요소: 두 번째 버튼

설명: 이 예제에서는 여러 버튼이 있고, 버튼을 클릭했을 때 해당 버튼의 텍스트 내용을 알려줍니다.

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

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

jQuery event.type 속성 이해하기: 이벤트 유형 식별하기  (0) 2024.04.03
jQuery event.timeStamp 속성 이해하기: 이벤트 발생 시간 파악하기  (0) 2024.04.03
jQuery event.stopPropagation() 메서드 이해하기: 이벤트 전파 중단하기  (0) 2024.04.03
jQuery event.stopImmediatePropagation() 메서드 이해하기: 이벤트 전파를 즉시 멈추는 방법  (0) 2024.04.03
jQuery 이벤트 객체의 result 속성 활용하기  (0) 2024.04.02
'프로그래밍' Related Articles more