Event handlers and Event Listeners in Javascript: Part 1

The event listeners are used to respond to user interactions. There are a lot of different types of events that can occur, for example:

  • Clicking the mouse over a certain element or hovering the cursor over a certain element.
  • Pressing a key on the keyboard.
  • Resizing or closing the browser window.
  • A web page finishing loading.
  • A form being submitted.
  • A video being played, or paused, or finishing play.
  • An error occurring.

Each available event will have an event handler which is a block of code that runs when the event happens. Event handlers are called event listeners. The listener listens out for the event to happen and the handler is the actual code that runs after event fires. 

First example

//The HTML

<button>Change colorbutton>

//the Javascript

var btn = document.querySelector('button');

btn.onclick = function() {

  document.body.style.backgroundColor = "red";


Or to makeit more readable you could do this:

function bgChange() {

  document.body.style.backgroundColor = "red";


btn.onclick = bgChange; But the output is the same and clicking the button will change the background colour.

Lets now have a look of how we could implement event handlers and which one is better. ## Inline event handlers {#Inline_event_handlers_—_don't_use_these.highlight-spanned} It mixes your Javascript with HTML by attaching the event directly to an attribute of HTML code:
<button onclick="bgChange()">Press mebutton>

function bgChange() {

  document.body.style.backgroundColor = "red";

} Here we have assigned the bgChange function to onclick event of the button. This mix is a bad practice and could cause lots of problems in your code. Wha if you need to do the same action for multiple buttons? You will add lots of attributes?

Another approach in this case is to put the function body inside the HTML code as well:

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press mebutton>

Separating your programming logic from your content also makes your site more friendly to search engines. It takes us to the next approach. ## addEventListener() and removeEventListener() {#addEventListener()_and_removeEventListener().highlight-spanned} This is [the newer approach](https://www.nikpro.com.au/what-is-spread-syntax-in-es6-and-how-to-use-it/) that is quiet similar to event handler approach but with a different syntax:
var btn = document.querySelector('button');
function bgChange() {
  document.body.style.backgroundColor = "red";

btn.addEventListener('click', bgChange);

We have two parameters inside the addEventListener. First one is the event name and the second is the handler function to run in response to the event. We could also put all the code inside the second parameter like this:

btn.addEventListener('click', function() {

  document.body.style.backgroundColor ="red"; }); We could also remove the listener:

btn.removeEventListener('click', bgChange);

With event listeners multiple functions could have same code in response to an event.  In the inline approach, we cannot have multiple handlers on the same event for an element so this will not work:

myElement.onclick = functionA;

myElement.onclick = functionB;

But with Event Listeners we could do this:

myElement.addEventListener('click', functionA);

myElement.addEventListener('click', functionB);

Both functions will run when the element is clicked. The main advantages of this mechanism is that you can remove event handler code if needed using `removeEventListener()`, and you can add multiple listeners of the same type to elements if required
© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.