Event Handlers with Event Listeners

Events!
An indispensable part of a website. What gives users the feeling that they’re actually communicating with the website, not just reading a newspaper or watching a movie.
Events are simply understood that actions taking place in the browser can be created by the user or the browser itself.
For example, when the user clicks on an element, enters text into a textfield or moves the cursor on an element.

In this article, I will talk about two ways to handle events and use them properly for each case.

Using Event Handler

You can use the available EventHandler property of the object to be able to “catch the event”.

It sounds a bit complicated, but you probably did it without knowing its name.

In this example, the onclick property is used so that when the user clicks on the button, it will print the words “Hello!” enter the console log.
The “onclick” attribute is just one of the available EventHandler . Here are some common properties that can be used.

No	Event Name	description
first	onclick	Event occurs when the HTML tag is clicked
2	ondbclick	Event occurs when double clicking on HTML tag
3	onchange	An event occurs when the value of the HTML tag is changed. Usually used in form input tags
4	onmouseover	The event occurs when the mouse pointer starts entering the HTML tag
5	onmouseout	The event occurs when the mouse pointer starts leaving the HTML tag
6	onmouseenter	Similar to onmouseover
7	onmouseleave	Similar to onmouseout
8	onmousemove	Event occurs when the mouse moves inside the HTML tag
9	onkeydown	Event occurs when typing any key in the input box
ten	onload	The event happens when the HTML tag starts running, it’s like an object-oriented constructor.
11	onkeyup	An event occurs when you type, but when you release the key, it is triggered
twelfth	onkeypress	An event occurs when you press a key in the input box
14	onblur	Event occurs when the mouse pointer leaves the input box
15	oncopy	An event occurs when you copy the content of the tag
16	oncut	An event occurs when you cut the content of the tag
17	onpaste	An event happens when you paste content into a tag

 

Add Event Listener

In addition to the above EventHandler properties, we can also add an event to the object through the addEventListener .

By adding an event listener to an object, we can capture a series of events generated by the user or browser.

Instead of using the onclick property, here I use the addEventListener() method:

• target : This is the element you need to add Event Listeners to. (Using DOM Selector ).
• event : Are the types of events such as click, mouseover, … (You can see here )
• function : The name of the function you need to add

Difference between Event Handlers and addEventListener

If you will be using EventHandler , the most obvious difference is that if you add an event for the same type (e.g. onclick on the button), then the 2nd event will overwrite the first event and only the that event is enforced. The reason is due to:

For a given element, you can only have one event handler per event type, but you can have multiple event listeners .

At times like this we will need the addEventListener

How should I use it?

Which method you should use depends on where to use it.

Do you need to add multiple events to an element? Will the addition of that element be needed in the future?

Yes, that’s why the addEventListener is recommended.

Refer

https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34