/

HTML / CSS / JavaScript Tutorial

JavaScript DOM Event property: target

[this page | pdf | back links]

The target property of Event objects within the JavaScript DOM returns the HTML element that triggered 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)


Desktop view | Switch to Mobile