Đối tượng UiEvent trong HTML DOM

Đối tượng UiEvent trong HTML DOM đại diện cho một sự kiện xảy ra khi người dùng tương tác với các phần tử HTML.

Đối tượng "UiEvent" có thể có các thuộc tính và phương thức sau:

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM UiEvent detail</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; }
    #clickOn { border: 3px solid #F0FF33; margin: 15px auto; border-radius: 50%; background-color: #FFF933; width: 10px; height: 10px; }
    h2 { display: inline-block; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-UiEvent-detail</legend>
      <h2 id="highScore">Điểm Cao: 0</h2>
      <h2 id="currScore">Điểm Hiện Tại: 0</h2><br>
      <div id="playArea"><div onclick="getHighScore(event)" id="clickOn"></div></div><br>
    </fieldset>
  </form>
  <script>
    var clickOn = document.getElementById("clickOn");
    var playDisplay = document.getElementById("playArea");
    var highScore = document.getElementById("highScore");
    var currScore = document.getElementById("currScore");
    var high = 0, score = 0;
    function getHighScore(event) {
      var score = event.detail;
      currScore.textContent = 'Điểm Hiện Tại: ' + score;
      if (score > high) {
        highScore.textContent = 'Điểm Cao: ' + score;
        high = score;
      }
    }
  </script>
</body>
</html>

Kết quả

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

Sau khi nhấp vào phần tử div vàng liên tục:

Sau khi nhấp vào phần tử div vàng liên tục nhưng ít hơn lần trước: