DOM/adding-event-listeners.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Adding Event Listeners</title>
  </head>
  <body>
    <div id="output"></div>
    <script>
      const output = document.getElementById("output");

      output.innerHTML = `  
      <h1 id="title">Adding Event Listeners</h1>

      <button type="button" id="btn" class="btn remove buy">Click me</button>
    
      `;
      const btn = document.querySelector("button");

      function handleClick(event) {
        console.log("btn is clicked");
        document.getElementById("title").innerText = "Kill Me Heal Me";

        console.log(event);
        console.log(event.type);
        console.log(event.target);
        console.log(this);
      }
      btn.addEventListener("click", handleClick);

      btn.addEventListener("dblclick", (event) => {
        console.log("Double Clicked");
        console.log(event.target);
        console.log(this);
      });
    </script>
  </body>
</html>