Event Management is about adding, removing, and controlling events.
Adding Events
Example
<button id="btn">Click</button> <p id="demo"></p> <script> const btn = document.getElementById("btn");
// Let btn listen for click btn.addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Clicked!";
}
</script>Removing Events
Example
<button id="add">Add</button> <button id="remove">Remove</button> <button id="test">Test click</button> <p id="demo"></p> <script> const test = document.getElementById("test");
const remove = document.getElementById("remove");
const add = document.getElementById("add");
function myFunction() {
document.getElementById("demo").innerHTML += "Hello!";
}
// Let add listen for click add.addEventListener("click", function () { // Let test listen for click test.addEventListener("click", myFunction);
});
// Let remove listen for click remove.addEventListener("click", function () { // Prevent test from listen for click test.removeEventListener("click", myFunction);
});
</script>To remove an event listener, you must use the same named function you used to add it.
Blocking Events
Example
<a href="https://example.com id="link">Go to ExampleSite</a> <p id="demo"></p> <script> const link = document.getElementById("link"); // Let link listen for click link.addEventListener("click", function (event) { event.preventDefault(); document.getElementById("demo").innerHTML = "Link blocked!"; }); </script>