Thuộc tính type của Event trong HTML DOM

Thuộc tính type của Event trong HTML DOM trả về một chuỗi tương ứng với loại sự kiện như click, keypress, load, hoặc touchend.

Cú pháp

Trả về loại sự kiện:

event.type

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính Event type:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM Event type</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    .playArea { display: inline-block; border-radius: 50%; background-color: #DC3545; width: 50px; height: 50px; border: 3px solid #AC3509; transition: all 1.3s ease; }
    .clickStyle { transform: scale(1.5); }
    .touchstartStyle { transform: translateX(50px); }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-Event-type</legend>
      <div class="playArea"></div><br>
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var playDisplay = document.getElementsByClassName("playArea")[0];
    function getEventType(event) {
      if (event.type === 'click') {
        playDisplay.classList.remove('touchstartStyle');
        playDisplay.classList.add('clickStyle');
        divDisplay.textContent = 'Sự Kiện Kích Hoạt: ' + event.type;
      } else if (event.type === 'touchstart') {
        playDisplay.classList.remove('clickStyle');
        playDisplay.classList.add('touchstartStyle');
        divDisplay.textContent = 'Sự Kiện Kích Hoạt: ' + event.type;
      }
    }
    playDisplay.addEventListener("click", getEventType);
    playDisplay.addEventListener("touchstart", getEventType);
  </script>
</body>
</html>

Kết quả

Trước khi nhấp vào phần tử div:

Sau khi nhấp vào phần tử div:

Sau khi chạm vào phần tử div: