Understanding Different Ways of Event Handling in Javascript


In this Article we will understand the Different ways of Event handling that Javascript offers to us, but first, we need to understand what Event is ?

An Event is an action that occurs when user give some instruction as input or try to manipulates state of website. And the process of reacting to the events is called Event Handling. Javascript interacts with HTML by Event Handlers. 
For example — 
when a user press a keyboard key or mouse click, the heading or text of a Website will change.

http://sh017.hostgator.tempwebhost.net/media/5bd9d997a17bb0ef66b59aeb011c21bcsource: giphy.com

There are many types of Events and their event handlers like :-

  • Mouse Events : onclick, onmouseover, onmouseout, onmouseup, onmousedown etc.
  • Keyboard Events : onkeyup and onkeydown.
  • Document/Window events : onload, onunload, onresize etc.
  • Form Events : onfocus, onsubmit, onblur, onchange etc.

Javascript offers 3 different ways to handle events. 

  1. HTML event handlers.
  2. DOM level event handlers
  3. Event Listeners

HTML Event Handlers ( Inline Event )

In this, we assign an event handler with the function as an attribute in the HTML tag. But using HTML event handlers considered as a Bad practice because of the following reasons :

  • Readability : Difficult to read when we have multiple event handlers on same element because Event handler code mixed with HTML code
  • Timing Issue : If the element is loaded fully before javascript code , user starts interacting with it which in turn gives error.
[JavaScript] [JavaScript]

DOM level event handlers

In this , we have to give our element an identity which could be an id or class. As compare to previous one, in this Scope of function can easily be controlled.
One Common point is We can have only 1 event handler per event type in both.

[JavaScript] [JavaScript]

Event Listeners

In this method, We can use events by adding an event listener to an object. By this way we can handle wide range of events triggered by user.
In this we can have multiple event handlers per event type.

[JavaScript] [JavaScript]
  • addEventListener() – to register an event handler.
  • removeEventListener() – to remove an event handler.

Thanks For Reading, I hope you found this Article helpful.🙂

Latest

SENTRY integration in your React Native App for Error/Crash tracking

Sentry captures data by using an SDK within your...

Recall the concepts of useCallback.

useCallback hook is one of the best hooks offered...

Value of Comments in the code!!

During my journey of Software Development, I am always...

YOLO:Bullet Paced Algorithm

http://sh017.hostgator.tempwebhost.net/media/33949d0e61af4b50f374c534713f56b3 According to world health organization, more than 1.35 million...

Featured

Developing Enterprise Application in Node.js – CJS Vs ESM

Node.js is a popular runtime environment for building server-side...

Integrating your web react applications with their React Native(android and IOS) apps using QR code

Integrating a web application with Android and iOS apps...

YOLO: Bullet Paced Algorithm – popular choice for object detection in autonomous vehicles 

According to world health organization, more than 1.35 million...

JavaScript Objects

Introduction JavaScript is a versatile and flexible programming language, and one of its most powerful features is its ability to work with objects. Objects are...

Error Handling in React Js

Errors are bound to happen in our applications, whether they’re server-related errors, edge cases, api calling issues or others. As such, many methods have...

History of content updation in Strapi

Strapi is a Javascript-based, next-generation, open-source headless CMS. It provides developers the facility to use their favorite frameworks and tools to create, modify and...

LEAVE A REPLY

Please enter your comment!
Please enter your name here