SeouliteLab

jQuery event.type 속성 이해하기: 이벤트 유형 식별하기 본문

프로그래밍

jQuery event.type 속성 이해하기: 이벤트 유형 식별하기

Seoulite Lab 2024. 4. 3. 08:09

event.type 속성은 jQuery에서 이벤트 핸들러 내에서 호출되었을 때, 발생한 이벤트의 유형을 나타냅니다. 이를 통해 어떤 종류의 이벤트가 발생했는지를 식별할 수 있습니다.

예제 1: 기본 사용법

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

출력 결과: 이벤트 유형: click

설명: 이 예제에서는 버튼을 클릭했을 때, 발생한 이벤트의 유형인 click을 알려줍니다.

예제 2: 여러 이벤트 유형에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.type 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input").on("focus blur", function(event){
        alert("이벤트 유형: " + event.type);
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="입력하세요">
</body>
</html>

출력 결과:

  1. 이벤트 유형: focus (입력 필드를 클릭하여 포커스됨)
  2. 이벤트 유형: blur (입력 필드에서 포커스가 빠져나감)

설명: 이 예제에서는 입력 필드에 포커스가 들어오거나 나갈 때 각각 focus와 blur 이벤트가 발생하는 것을 보여줍니다.

예제 3: 키보드 이벤트에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.type 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input").on("keydown keyup", function(event){
        alert("이벤트 유형: " + event.type);
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="키를 누르세요">
</body>
</html>

출력 결과:

  1. 이벤트 유형: keydown (키를 누름)
  2. 이벤트 유형: keyup (키를 뗌)

설명: 이 예제에서는 키보드를 누르거나 뗄 때 각각 keydown와 keyup 이벤트가 발생하는 것을 보여줍니다.

예제 4: 마우스 이벤트에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.type 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("div").on("mouseenter mouseleave", function(event){
        alert("이벤트 유형: " + event.type);
      });
    });
  </script>
</head>
<body>
  <div style="width: 100px; height: 100px; background-color: #f0f0f0;"></div>
</body>
</html>

출력 결과:

  1. 이벤트 유형: mouseenter (마우스가 요소 안으로 들어옴)
  2. 이벤트 유형: mouseleave (마우스가 요소 밖으로 나감)

설명: 이 예제에서는 마우스가 요소에 들어오거나 나갈 때 각각 mouseenter와 mouseleave 이벤트가 발생하는 것을 보여줍니다.

예제 5: 폼 이벤트에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.type 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("form").on("submit reset", function(event){
        alert("이벤트 유형: " + event.type);
      });
    });
  </script>
</head>
<body>
  <form>
    <input type="text" placeholder="입력하세요">
    <button type="submit">전송</button>
    <button type="reset">취소</button>
  </form>
</body>
</html>

출력 결과:

  1. 이벤트 유형: submit (폼 제출)
  2. 이벤트 유형: reset (폼 리셋)

설명: 이 예제에서는 폼을 제출하거나 리셋할 때 각각 submit와 reset 이벤트가 발생하는 것을

보여줍니다.

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

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

jQuery focus 이벤트 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
jQuery event.which 속성 이해하기: 키 코드 식별하기  (0) 2024.04.03
jQuery event.timeStamp 속성 이해하기: 이벤트 발생 시간 파악하기  (0) 2024.04.03
jQuery event.target 속성 이해하기: 이벤트가 발생한 요소 식별하기  (0) 2024.04.03
jQuery event.stopPropagation() 메서드 이해하기: 이벤트 전파 중단하기  (0) 2024.04.03
'프로그래밍' Related Articles more