SeouliteLab

jQuery event.timeStamp 속성 이해하기: 이벤트 발생 시간 파악하기 본문

프로그래밍

jQuery event.timeStamp 속성 이해하기: 이벤트 발생 시간 파악하기

Seoulite Lab 2024. 4. 3. 08:08

event.timeStamp 속성은 jQuery에서 이벤트 핸들러 내에서 호출되었을 때, 이벤트가 발생한 시간을 나타냅니다. 이를 통해 이벤트의 발생 순서나 간격 등을 파악할 수 있습니다.

예제 1: 기본 사용법

<!DOCTYPE html>
<html>
<head>
  <title>event.timeStamp 예제</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.timeStamp);
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
</body>
</html>

출력 결과: 이벤트 발생 시간: (클릭한 시간의 타임스탬프)

설명: 이 예제에서는 버튼을 클릭했을 때, 이벤트가 발생한 시간의 타임스탬프를 알려줍니다.

예제 2: 여러 이벤트 핸들러에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.timeStamp 예제</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.timeStamp);
      });

      $("button").on("click", function(event){
        alert("두 번째 핸들러 - 이벤트 발생 시간: " + event.timeStamp);
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
</body>
</html>

출력 결과:

  1. 첫 번째 핸들러 - 이벤트 발생 시간: (클릭한 시간의 타임스탬프)
  2. 두 번째 핸들러 - 이벤트 발생 시간: (클릭한 시간의 타임스탬프)

설명: 이 예제에서는 하나의 버튼에 대해 두 개의 이벤트 핸들러가 등록되어 있습니다. 각 핸들러에서는 이벤트가 발생한 시간의 타임스탬프를 알려줍니다.

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

<!DOCTYPE html>
<html>
<head>
  <title>event.timeStamp 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#container").on("click", "button", function(event){
        alert("버튼 클릭 - 이벤트 발생 시간: " + event.timeStamp);
      });

      $("#container").on("click", function(event){
        alert("컨테이너 클릭 - 이벤트 발생 시간: " + event.timeStamp);
      });
    });
  </script>
</head>
<body>
  <div id="container">
    <button>버튼</button>
  </div>
</body>
</html>

출력 결과:

  1. 버튼 클릭 - 이벤트 발생 시간: (클릭한 시간의 타임스탬프)
  2. 컨테이너 클릭 - 이벤트 발생 시간: (클릭한 시간의 타임스탬프)

설명: 이 예제에서는 이벤트 위임을 사용하여 버튼 클릭에 대한 핸들러를 등록했습니다. 각 핸들러에서는 이벤트가 발생한 시간의 타임스탬프를 알려줍니다.

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

<!DOCTYPE html>
<html>
<head>
  <title>event.timeStamp 예제</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.timeStamp);
      });
    });
  </script>
</head>
<body>
  <div id="target" style="width: 100px; height: 100px; background-color: #f0f0f0;"></div>
</body>
</html>

출력 결과: 이벤트 발생 시간: (클릭 또는 마우스 오버한 시간의 타임스탬프)

설명: 이 예제에서는 여러 이벤트 유형(click 및 mouseover)에 대해 하나의 핸들러가 등록되어 있습니다. 핸들러에서는 이벤트가 발생한 시간의 타임스탬프를 알려줍니다.

예제 5: 이벤트 객체와 함께 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.timeStamp 예제</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.timeStamp);
        alert("클릭한 버튼의 텍스트: " + $(this).text());
      });
    });
  </script>
</head>
<body>
  <button>첫 번째 버튼</button>
  <button>두 번째 버튼</button>
</body>
</html>

출력 결과:

  1. 이벤트 발생 시간: (클릭한 시간의 타임스탬프)
  2. 클릭한 버튼의 텍스트: (클릭한 버튼의 텍스트)

설명: 이 예제에서는

버튼을 클릭했을 때, 이벤트가 발생한 시간의 타임스탬프와 클릭한 버튼의 텍스트를 알려줍니다.

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

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

jQuery event.which 속성 이해하기: 키 코드 식별하기  (0) 2024.04.03
jQuery event.type 속성 이해하기: 이벤트 유형 식별하기  (0) 2024.04.03
jQuery event.target 속성 이해하기: 이벤트가 발생한 요소 식별하기  (0) 2024.04.03
jQuery event.stopPropagation() 메서드 이해하기: 이벤트 전파 중단하기  (0) 2024.04.03
jQuery event.stopImmediatePropagation() 메서드 이해하기: 이벤트 전파를 즉시 멈추는 방법  (0) 2024.04.03
'프로그래밍' Related Articles more