Javascript DOM Mouse Over Event

Description

Javascript DOM Mouse Over Event

View in separate window 

  <!DOCTYPE html> 

  <html lang="en"> 
  <head> 
      <style> 
           .underline { /* w  w w  . ja  va  2s.  c  o m*/
              color: red; 
              text-decoration: underline; 
          } 
      </style> 

  </head> 
  <body> 
      <p>This is paragraph 1.</p> 
      <p>This is paragraph 2.</p> 
      <p>This is paragraph 3.</p> 

      <script> 
        function handleEvent(e) { 
            let target = e.target; 
            let type = e.type; 

            if (target.tagName == "P") { 
                if (type == "mouseover") { 
                    target.className = "underline"; 
                } else if (type == "mouseout") { 
                    target.className = ""; 
                } 
            } 

            if (type == "click") { 
                console.log("You clicked the mouse button at the X :" 
                    + e.clientX + " and Y :" + e.clientY + " coordinates"); 
            } 
        } 

        document.addEventListener("mouseover", handleEvent); 
        document.addEventListener("mouseout", handleEvent); 
        document.addEventListener("click", handleEvent); 
    </script> 

</body> 
</html>



PreviousNext

Related