Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> .parent { background-color: #f2f2f2; padding: 20px; text-align: center; } .child { background-color: #d9d9d9; padding: 20px; text-align: center; } button { background-color: #4caf50; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <div class="parent"> <div class="child"> <button>Click me!</button> </div> </div> <script> const parent = document.querySelector(".parent"); const child = document.querySelector(".child"); parent.addEventListener("click", function () { alert("Clicked on parent!"); }); child.addEventListener("click", function () { alert("Clicked on child!"); }); </script> </body> </html>