Đối tượng HTML DOM UiEvent đạ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.
Đây, “UiEvent” có thể có các thuộc tính và phương thức sau -
| Thuộc tính / Phương thức | Mô tả |
|---|---|
| chi tiết | Trả lời một số có thông tin chi tiết về sự kiện |
| lượt xem | Trả về tham chiếu đến đối tượng Window nơi xảy ra sự kiện |
Hãy để chúng tôi xem ví dụ về Chi tiết sự kiện tài sản -
Ví dụ
<!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> Đầu ra
Trước khi nhấp vào phần tử div màu vàng -
Sau khi nhấp liên tục vào phần tử div màu vàng -
Sau khi nhấp vào phần tử div màu vàng liên tục nhưng ít hơn lần trước -
