คุณสมบัติ type ของ HTML DOM Event

คุณสมบัติ type ของ HTML DOM Event ส่งคืน สตริง ที่สอดคล้องกับประเภทของเหตุการณ์ (event type) เช่น click, keypress, load, touchend เป็นต้น

ไวยากรณ์ (Syntax)

event.type

ตัวอย่างการใช้งาน

ตัวอย่างนี้ตรวจจับประเภทเหตุการณ์ (click หรือ touchstart) และทำการเปลี่ยนรูปแบบของวงกลมตามประเภทเหตุการณ์

<!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 = 'Event Fired: '+event.type;
    } else if(event.type === 'touchstart'){
      playDisplay.classList.remove('clickStyle');
      playDisplay.classList.add('touchstartStyle');
      divDisplay.textContent = 'Event Fired: '+event.type;
    }
  }
  playDisplay.addEventListener("click", getEventType);
  playDisplay.addEventListener("touchstart", getEventType);
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกวงกลม:

หลังคลิกวงกลม:

หลังสัมผัสวงกลม (touchstart):