WHAT THE HECK ARE EVENTS?

Events in Javascript are used to notify the code whenever “something interesting has happened” – That can be everything from a mouse click to a page being loaded. Based on these events, we can then write code to react accordingly. For example, we can run a hello function when a user clicks on a button by defining an “onclick” attribute:

EVENT LISTENER

Alternatively, you can also attach an event listener to the HTML elements using Javascript itself.

As you may have noticed, when we attach the Javascript event listener, we simply define the corresponding event without the “on” keyword.

MOUSE EVENTS

Please do take note that some events do provide some parameters, the mouse move, for example, provides the X and Y mouse coordinates.

For a complete list of mouse events and parameters, you can check out MDN Web Docs.

KEYBOARD EVENTS

Keyboard events are mostly useful for text input elements. For example, you can run an auto-complete as the user types something.

Similar to mouse events, key press events will also return some parameters – Check it out at MDN.

PAGE EVENTS

Events don’t just cover user input, they can also be fired on certain processes or timing, for example, when the page loads:

CREATING YOUR OWN CUSTOM EVENTS

Yes, you can. You can create your own events and fire them, for example, upon finishing a certain process:

function dummy(){
  // Do your processing
  var x = 10;
  var y = 15;
  var z = x + y;

  // Custom event - finished calculation
  var evt = new CustomEvent('dummyDone');
  window.dispatchEvent(evt);
}

window.addEventListener("dummyDone", function(){
	alert("Dummy Done!");
});
dummy();