HTML DOM UiEvent ऑब्जेक्ट एक ऐसी घटना का प्रतिनिधित्व करता है जो HTML तत्वों के साथ उपयोगकर्ता की सहभागिता पर होती है।
यहां, “UiEvent” निम्नलिखित गुण और विधियाँ हो सकती हैं -
| संपत्ति/विधि <वें>विवरण | |
|---|---|
| विवरण | यह घटना के विवरण के साथ एक संख्या देता है |
| देखें | यह उस विंडो ऑब्जेक्ट का संदर्भ देता है जहां घटना हुई थी |
आइए ईवेंट विवरण . का एक उदाहरण देखें संपत्ति -
उदाहरण
<!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> आउटपुट
पीले div तत्व पर क्लिक करने से पहले -
पीले div तत्व को लगातार क्लिक करने के बाद -
पीले div तत्व को लगातार क्लिक करने के बाद लेकिन पिछली बार से कम -
