|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 7 | + <title>Removing Event Listeners</title> |
| 8 | + </head> |
| 9 | + <body> |
| 10 | + <div id="output"></div> |
| 11 | + <script> |
| 12 | + const output = document.getElementById("output"); |
| 13 | + |
| 14 | + output.innerHTML = ` |
| 15 | + <h1 id="title">Removing Event Listeners</h1> |
| 16 | +
|
| 17 | + <button type="button" id="btn" class="btn remove buy">Click me once</button> |
| 18 | + <button type="button" id="btn2" class="btn remove buy">Double Click me</button> |
| 19 | + |
| 20 | + `; |
| 21 | + const btn = document.querySelector("#btn"); |
| 22 | + const btn2 = document.querySelector("#btn2"); |
| 23 | + |
| 24 | + function handleClick(event) { |
| 25 | + console.log("btn is clicked"); |
| 26 | + document.getElementById("title").innerText = |
| 27 | + "button will not work soon"; |
| 28 | + |
| 29 | + setTimeout(() => { |
| 30 | + //disable click after few seconds |
| 31 | + btn.removeEventListener("click", handleClick); |
| 32 | + document.getElementById("title").innerText = "Event removed"; |
| 33 | + }, 3000); |
| 34 | + } |
| 35 | + btn.addEventListener("click", handleClick); |
| 36 | + |
| 37 | + // setTimeout(() => { |
| 38 | + // btn.removeEventListener("click", handleClick); |
| 39 | + // document.getElementById("title").innerText = "Event removed"; |
| 40 | + // }, 3000); |
| 41 | + |
| 42 | + btn2.addEventListener( |
| 43 | + "dblclick", |
| 44 | + (event) => { |
| 45 | + console.log("double clicked"); |
| 46 | + btn2.innerText = "disabled"; |
| 47 | + }, |
| 48 | + { once: true } |
| 49 | + ); |
| 50 | + </script> |
| 51 | + </body> |
| 52 | +</html> |
0 commit comments