JavaScript Event Target Element (srcElement)

When designing web application with JavaScript event handling, it is important to figure out what the (possible) target element is.

Let's take mouseover as example, see the following description from [1]:

mouseover

Fires when the user moves the mouse over the element you registered the event on or one of its descendants.

There is an example illustrating this situation in [2]. And mouseenter event in [3] provides a 'do not bubble' version of the mouseover event, but it is a pity that neither Firefox or Chrome supports the event. So, when you get the event target element (or srcElement) in the callback function of events, it is possible the target element may be one of descendant elements. As a result, when dealing with the callback function of events, REMEMBER to CHECK what the TARGET ELEMENT is.

I wrote sample code to show how to deal with the target issue of JavaScript event handling. Please see the following demo and code:

Demo

target.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Check Event Target Example</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="addevt()">
  <div id="div1">I am div1. Try to click me.
    <br /><br />
    <div id="div2">I am div2. Try to click me.
      <br /><br />
      <span id="span1">I am span1. Try to click me.</span>
    </div>
  </div>

  <div id="info" style="margin-top: 20px;width: 30%; margin-left:35%; margin-right:35%;" />

<script src="target.js"></script>
</body>
</html>
target.js | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* IE: attachEvent, Firefox & Chrome: addEventListener */
function _addEventListener(evt, element, fn) {
  if (window.addEventListener) {element.addEventListener(evt, fn, false);}
  else {element.attachEvent('on'+evt, fn);}
}

function _getParentElement(element, id) {
  /* sometimes mouse event return the child element of actual element we need, so we need to check parent element */
  /* Chrome and Firefox use parentNode, while Opera uses offsetParent */
  while(element.parentNode) {
    if( element.id == id ) {return element;}
    element = element.parentNode;
  }
  while(element.offsetParent) {
    if( element.id == id ) {return element;}
    element = element.offsetParent;
  }
  return null;
}

function onDiv1Click(evt) {
  if(!evt) {evt = window.event;}
  var target = evt.target || evt.srcElement;
  document.getElementById("info").innerHTML = target.id + " clicked";
  if (target.id != 'div1') {
    var ediv1 = _getParentElement(target, 'div1');
    document.getElementById("info").innerHTML += '<br />' + ediv1.id + ' element was gotten';
  }
}

function addevt() {
  _addEventListener('click', document.getElementById("div1"), onDiv1Click);
  document.getElementById("info").innerHTML = "only div1 onclick event registered";
}
style.css | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#div1 {
  text-align: left;
  border-style: solid;
  border-width: 3px;
  border-color: #36C;
  width: 30%;
  margin-left:25%;
  margin-right:45%;
  min-width: 200px;
  height: 300px;
  margin-top: 100px;
}
#div2 {
  text-align: left;
  border-style: solid;
  border-width: 3px;
  border-color: #36C;
  width: 60%;
  margin-left:20%;
  margin-right:20%;
  height: 60%;
}
#span1 {
  background-color: #0C0;
  border-width: 3px;
}

As you can see, only div1 onclick event is registered. But when child elements (i.e., div2 or span1) of div1 are clicked, the target element of the callback function is the child element, not div1. The _getParentElement function is provided in the sample code to show how to reach div1 in this case.

References:

[1]Event - mouseover and mouseout
[2]mouseover and mouseout - Mouse Event - QuirksMode
[3]mouseenter - Event compatibility tables
[4]Accessing the HTML element - Introduction to Events - QuirksMode
[5]Which HTML element is the target of the event? - Event properties - QuirksMode

Additional References:

[6]Javascript - Introduction to Events - QuirksMode
[7]Javascript - Event properties - QuirksMode
[8]javascript - How do I prevent a parent's onclick event from firing when a child anchor is clicked? - Stack Overflow
[9]JavaScript Event Delegation is Easier than You Think
[10]Delegating the focus and blur events - QuirksBlog
[11]Event Delegation versus Event Handling
[12]Event Delegation Made Easy
[13]JavaScript Kit- Event Object
Powered by Github Pages, Pelican, pyScss.