Loading lesson path
Event Management is about adding, removing, and controlling events.
<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>
<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.
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>