HTML DOM UiEvent ऑब्जेक्ट

HTML DOM UiEvent ऑब्जेक्ट एक इवेंट को दर्शाता है जो उपयोगकर्ता के HTML एलिमेंट्स के साथ इंटरैक्शन पर होता है।

गुण और विधियां

उदाहरण (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">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>

आउटपुट

पीले डिव एलिमेंट पर क्लिक करने से पहले -

पीले डिव एलिमेंट पर लगातार क्लिक करने के बाद -

पिछली बार से कम लगातार क्लिक करने के बाद -