JavaScript Event Management

Click

const btn = document.getElementById("btn");

// Let btn listen for click

btn.addEventListener("click", myFunction);

function myFunction() {

  document.getElementById("demo").innerHTML = "Clicked!";

}

Add

 Remove

 Test click

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);

});

Go to EA Academy

const link = document.getElementById("link");

// Let link listen for click

link.addEventListener("click", function (event) {

  event.preventDefault();

  document.getElementById("demo").innerHTML = "Link blocked!";

});