The "this" and "target" can be used in JavaScript events to get the element associated to the registered event.
- "this" - is allways what the event was bound to (the object to which the event was registered).
- "target" - is a property of the event. "e.target" is the element that triggers the event.

• To can use the "target" property, you must add a parameter to the function with the event.
Syntax:
object.event = function(e) {
  // here you can use e.target
}
"this" and "e.target" make the difference between the object to which the event is registered and the element that triggers the event. Sometimes they represent the same object, but not allways, especially when we work with parent and children elements.
- Here's an example. A #parent DIV with a #child DIV inside it; and onclick event registered to #parent, getting the ID of the element returned by "this" and "e.target".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example this and target</title>
<style type="text/css">
#parent {
 height: 7em;
 background: #00da01;
 padding: 1em;
}
#child {
 height: 80%;
 margin: 0.5em 1.5em;
 background: #8889fe;
}
</style>
</head>
<body>

<div id="parent">Parent
 <div id="child">Child</div>
</div>
<script type="text/javascript">
document.getElementById('parent').onclick = function(e) {
  var id1 = this.id;
  var id2 = e.target.id;
  alert('this = '+ id1 +'\n e.target = '+ id2);
}
</script>

</body>
</html>
Demo, click on the Child (blue rectangle), then on the Parent (green area), and see the difference in the alert window.
Parent
Child
• Working with "this" and "e.target" in events is useful for example when you want to register an event with instructions to an element but not to its children, or with different instructions for children. Or, when you want to work exactly with the element which triggers the event (use "e.target").
- In the following example the alert window is displayed only when you click on the Parent DIV.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example this and target</title>
<style type="text/css">
#parent {
 height: 7em;
 background: #00da01;
 padding: 1em;
}
#child {
 height: 80%;
 margin: 0.5em 1.5em;
 background: #8889fe;
}
</style>
</head>
<body>

<div id="parent">Parent
 <div id="child">Child</div>
</div>
<script type="text/javascript">
document.getElementById('parent').onclick = function(e) {
  if(this === e.target) {
    alert(this.id);
  }
}
</script>

</body>
</html>
Demo, click on the Child (blue rectangle), then on the Parent (green area).
Parent
Child

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
this and target in JavaScript Events

Last accessed pages

  1. jQuery Drag and Drop Rows between two similar Tables (6738)
  2. Basic HTML elements (3681)
  3. Sport Games (12516)
  4. JQZoom Image Magnifier (9297)
  5. Magic Treasure (283)

Popular pages this month

  1. Flash Games - Free online Games (1536)
  2. Qwop (1269)
  3. Tunnel Rush (1133)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1092)
  5. Drag Racer V3 (823)