The this and target keywords 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 object. event.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(ev){
 // here you can use: ev.target
}

The this keyword and ev.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 ev.target.
<!doctype html>
<html>
<head>
<title>title</title>
<style>
#parent {
 height: 7em;
 background: #00da01;
 padding: 1em;
}
#child {
 height: 70%;
 margin: 1em 5em;
 background: #8889fe;
}
</style>
</head>
<body>
<h4>example this and target</h4>
<p>Click on the Child (blue rectangle), then on the Parent (green area), and see the difference in the alert window.</p>

<div id='parent'>Parent
 <div id='child'>Child</div>
</div>
<script>
document.getElementById('parent').onclick = function(ev){
 var id1 = this.id;
 var id2 = ev.target.id;
 alert('this = '+ id1 +'\n ev.target = '+ id2);
}
</script>
</body>
</html>

Working with this keyword and event.target

The this keyword and ev.target are useful in events 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 ev.target).


- In the following example the alert window is displayed only when you click on the Parent DIV.
<!doctype html>
<html>
<head>
<title>title</title>
<style>
#parent {
 height: 7em;
 background: #00da01;
 padding: 1em;
}
#child {
 height: 70%;
 margin: 1em 5em;
 background: #8889fe;
}
</style>
</head>
<body>
<h4>example ev.target</h4>
<p>Click on the Child (blue rectangle), then on the Parent (green area).</p>

<div id='parent'>Parent
 <div id='child'>Child</div>
</div>

<script>
document.getElementById('parent').onclick = function(ev){
 if(this === ev.target) {
 alert(this.id);
 }
}
</script>
</body>
</html>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
this and target in JavaScript Events

Last accessed pages

  1. querySelector and querySelectorAll (12509)
  2. Awareness - by Anthony de Mello (5208)
  3. Get Mime Type of file or string content in PHP (1978)
  4. PHP Unzipper - Extract Zip, Rar Archives (4292)
  5. innerHTML and outerHTML to Get and Replace HTML content (23133)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1585)
  2. Contact page - CoursesWeb (1548)
  3. Tabs effect with CSS (1542)
  4. PHP getElementById and getElementsByTagName (749)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (624)