JavaScript Event Management
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>
Try it Yourself »
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>
Try it Yourself »
Note
To remove an event listener, you must use the same named function you used to add it.
Block Events
Example
Prevent default (block a link)
<a href="https://www.w3schools.com" id="link">Go to W3Schools</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>
Try it Yourself »
