JavaScript DOM Event property: type
[this page | pdf | back links]
The type property
of Event
objects within the JavaScript
DOM returns the
name of the event.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,td,tr,th,caption {border: thin solid black; border-collapse: collapse;}
</style>
</head>
<body>
Try pressing a key in this input box:
<input style="background-color: yellow; border: 2px solid black; width: 200px; height: 100px;"
onkeypress="myOnkeypress(event)"><br><br>
Event constants and properties are:<br>
<table>
<tr><th>Event constant</th><th>value</th></tr>
<tr><td>AT_TARGET</td><td id="x1"></td></tr>
<tr><td>BUBBLING_PHASE</td><td id="x2"></td></tr>
<tr><td>CAPTURING_PHASE</td><td id="x3"></td></tr>
<tr><th>Event property</th><th>value</th></tr>
<tr><td>bubbles</td><td id="x4"></td></tr>
<tr><td>cancelable</td><td id="x5"></td></tr>
<tr><td>currentTarget</td><td id="x6"></td></tr>
<tr><td>defaultPrevented</td><td id="x7"></td></tr>
<tr><td>eventPhase</td><td id="x8"></td></tr>
<tr><td>isTrusted</td><td id="x9"></td></tr>
<tr><td>target</td><td id="x10"></td></tr>
<tr><td>timeStamp</td><td id="x11"></td></tr>
<tr><td>type</td><td id="x12"></td></tr>
<tr><td>view</td><td id="x13"></td></tr>
</table>
<script>
function myOnkeypress(event) {
document.getElementById("x1").innerHTML = event.AT_TARGET;
document.getElementById("x2").innerHTML = event.BUBBLING_PHASE;
document.getElementById("x3").innerHTML = event.CAPTURING_PHASE;
document.getElementById("x4").innerHTML = event.bubbles;
document.getElementById("x5").innerHTML = event.cancelable;
document.getElementById("x6").innerHTML = event.currentTarget;
document.getElementById("x7").innerHTML = event.defaultPrevented;
document.getElementById("x8").innerHTML = event.eventPhase;
document.getElementById("x9").innerHTML = event.isTrusted;
document.getElementById("x10").innerHTML = event.target;
document.getElementById("x11").innerHTML = event.timeStamp;
document.getElementById("x12").innerHTML = event.type;
document.getElementById("x13").innerHTML = event.view;
}
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)