---
title: "How to add event handlers on html elements by JavaScript?"
description: "How to add event handlers on html elements by JavaScript?"
author: "Ravi Vishwakarma"
published: 2021-07-19
canonical: https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript
category: "web application"
tags: ["javascript", "web development", "web application development"]
reading_time: 3 minutes
---
# How to add event handlers on html elements by JavaScript?
How to [add](https://yourviews.mindstick.com/story/4883/5-signs-you-need-to-add-more-protein-to-your-diet) [event handlers](https://www.mindstick.com/forum/2155/imagebutton-with-mouse-event-handlers-considered-not-well-formed) on [html](https://www.mindstick.com/articles/12368/why-are-html-themes-the-first-selection-of-designers) [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) by [JavaScript](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)?
## Answers
### Answer by user
## How to add event handler
The addEventListener() method attaches an [event](https://www.mindstick.com/articles/54942/6-tips-for-organising-a-successful-corporate-event) handler to the specified element. The addEventListener() method attaches an event handler to an element without overwriting existing event [handlers](https://www.mindstick.com/forum/1388/button-handlers-in-xaml).
You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two 'click' events. You can add event listeners to any DOM object not only HTML elements. i.e the window object. The addEventListener() method makes it easier to control how the event reacts to bubbling. When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.
You can easily remove an event listener by using the removeEventListener() method.
Syntax
```
element.addEventListener(event, function, useCapture);
```
The first parameter is the type of the event (like 'click' or 'mousedown' or any other HTML DOM Event.). The second parameter is the function we want to call when the event occurs. The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional.
```
```
```
```
\
```
```
\
\
\
### Answer by Ethan Karla
## Event in javaScript
This is a process in which the related code and controls are not activated automatically, it is executed by various responses of the user. In this process, the code of the program remains idle until an event (Button) (Click), etc. is called, that is, the mutual union of the hardware and software of the system is called Event.
**Event handling** is the process that controls events and decides what to do when an event occurs. A source is an object that generates the event. These are components like- buttons, text fields, etc. The event is generated when the state inside the source changes. A source can generate more than one event. The source has to be registered with the listener because whenever an event occurs, its notification will be received by the listener.
You can easily remove an event listener by calling the **removeEventListener() a** method in JavaScript.
## Syntax
```
element.addEventListener(event, function, useCapture)event - this argument is mandatory, it takes event names like click, dblclick, mouseover, mousemove, etc.function - also this argument is mandatory because this is executed after the event occurs.useCapture - it is optional, it can take true and false values.
```
Example
```