Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Event Target Demo</title> <style type="text/css"> div, p, a{ padding: 15px 30px; display: block; border: 2px solid #000; background: #fff; } </style> </head> <body> <div id="wrap">DIV <p class="hint">P <a href="#">A</a> </p> </div> <script> // Selecting the div element let div = document.getElementById("wrap"); // Attaching an onclick event handler div.onclick = function(event) { event.target.style.backgroundColor = "lightblue"; // Let the browser finish rendering of background color before showing alert setTimeout(() => { alert("target = " + event.target.tagName + ", this = " + this.tagName); event.target.style.backgroundColor = '' }, 0); } </script> </body> </html>
