Event Target

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
  background: gray;
  color: white;
}
</style>
</head>
<body>
  <p>This is a test. 
  </p>
  <p id="block2">This is a test. 
  </p>
  <script type="text/javascript">
    var pElems = document.getElementsByTagName("p");
    for ( var i = 0; i < pElems.length; i++) {
      pElems[i].onmouseover = handleMouseEvent;
      pElems[i].onmouseout = handleMouseEvent;
    }
    function handleMouseEvent(e) {
      if (e.type == "mouseover") {
          e.target.innerHTML += "mouseover";
        e.target.style.background = 'white';
        e.target.style.color = 'black';
      } else {
        e.target.style.removeProperty('color');
        e.target.style.removeProperty('background');
      }
    }
  </script>
</body>
</html>
  
Click to view the demo
Home 
  JavaScript Book 
    DOM  

DOM Event:
  1. The DOM Events
  2. Event Flow: capture, target, and bubbling
  3. eventPhase
  4. preventDefault: Cancellable Events
  5. Events Type
  6. Event Target