Adding / Removing Event Handlers

Event play a very important role in web applications. Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.

For example, if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box or sending data to the web server.

The common events that happens in a system is listed below

• Mouse Click
• Key Press
• Mouse Move
• Key Down
• Key Up
• etc

Event can be attached to elements either inline, i.e. directly in the HTML or Programmatically with JavaScript.

Inline Event Handlers

Let’s see how to attach an inline event handler to a button element in the page.

Let’s say we have HTML fragment and we have to attach on event to the click of the button. We can directly attach the event handler inline by adding the event name prefixed with the “on”.

For example to add a click event we add the property/attribute called “onclick” and we pass in a function as a string parameter.

<button onclick="deleteTask()" class="task-delete-button">x</button> 

So, when the button is clicked the deleteTask() method will be invoked. For now the deleteTask() method simple displays an alert.

function deleteTask() {
  alert(event.target);
}

By default a global “event” variable is available, which contains lot of useful properties.

In the above code we are alerting the event.target. Here target is the source of the event, in this case the HTMLButton.

We can also pass explicit parameter to the event handler function as shown below.

<button onclick="deleteTask(1)" class="task-delete-button">x</button>

Here we are explicitly passing “1” as the parameter to the function. Later on we will see how to pass parameters dynamically, rather than hardcoding.

The modifed deleteTask() function is shown below. This time I am logging the values to the console.

function deleteTask(id) {
   console.log("id: ", id) ;  // here id should be 1
   console.log("events: event);  // the global event variable
}

TIP: Use the browser console window to see the logs.

Programatically attaching Event Handler

Let’s now take a look at how to Programmatically attach event handler. First we have to query and get the element/elements on which event needs to be attached.

Let’s say we have a ‘submit’ button within an HTML form and we need to handle the click event of the button.

 <button id="btnSubmit" type="submit" class="btn primary">SUBMIT</button>

So, let’s attach the click event handler dynamically. For that let’s use the DOM query method and get the button element and then use addEventListerner method as shown below.

const btnSubmit = document.querySelector("#btnSubmit");
btnSubmit.addEventListener("click", function (e) {
  e.preventDefault();
  console.log("Click: ", e.target);  
});

NOTE: Here we are using the preventDefault() method from the event parameter as this button is of type submit and within a HTML form. More on that later. But take a look at the full code below.

The code for experimentation is here