HTML DOM UiEvent Object

HTMLWeb DevelopmentFront End Technology

The HTML DOM UiEvent Object represents an event which incurs on user’s interaction with HTML elements.

Here, “UiEvent” can have the following properties and methods −

Property/Method
Description
detail
Itreturns a number with details about the event
view
Itreturns a reference to the Window object where the event occurred

Let us see an example of Event detail property −

Example

 Live Demo

<!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">High Score: 0</h2>
         <h2 id="currScore">Current Score: 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 = 'Current Score: '+score;
         if(score > high){
            highScore.textContent = 'High Score: '+score;
            high = score;
         }
   }
</script>
</body>
</html>

Output

Before clicking the yellow div element −

After clicking the yellow div element continuously −

After clicking the yellow div element continuously but less than previous time −

raja
Published on 30-Oct-2019 10:48:42
Advertisements