Thuộc tính Loại sự kiện HTML DOM trả về một chuỗi tương ứng với loại sự kiện, chẳng hạn như nhấp chuột, nhấn phím, tải hoặc chạm.
Sau đây là cú pháp -
Trả lại số giây mà quá trình chuyển đổi đã chạy -
event.type
Hãy để chúng tôi xem ví dụ về Loại sự kiện tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Event type</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;
transition: all 1.3s ease;
}
.clickStyle {
transform: scale(1.5);
}
.touchstartStyle {
transform: translateX(50px);
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Event-type</legend>
<div class="playArea"></div><br>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var playDisplay = document.getElementsByClassName("playArea")[0];
var TranslateXSelect = document.getElementById("TranslateXSelect");
var ScaleSelect = document.getElementById("ScaleSelect");
function getEventType(event) {
if(event.type === 'click'){
playDisplay.classList.remove('touchstartStyle');
playDisplay.classList.add('clickStyle');
divDisplay.textContent = 'Event Fired: '+event.type;
} else if(event.type === 'touchstart'){
playDisplay.classList.remove('clickStyle');
playDisplay.classList.add('touchstartStyle');
divDisplay.textContent = 'Event Fired: '+event.type;
}
}
playDisplay.addEventListener("click", getEventType);
playDisplay.addEventListener("touchstart", getEventType);
</script>
</body>
</html> Đầu ra
Trước khi nhấp vào phần tử div -
Sau khi nhấp vào phần tử div -
Sau khi chạm vào phần tử div -
