The **`addEventListener()` method** attaches an event handler to the specified element -- it is supported in many browsers such as Google Chrome, Mozilla Firefox, Safari, Opera, and the latest versions of Internet Explorer.
# Syntax
```
element.addEventListener(event, function, useCapture)
```
**`event`**: Required parameter. Name of the event that is to be clicked. Data type is string.

**`function`**: Required parameter. The function is supposed to be executed when the `event` is clicked.

> `function` can be both internal and external functions.

**`useCapture`**: Optional parameter. A boolean value indicates whether the event handler is supposed to be executed in the bubbling or the capturing phase. 
```
if true:
  capturing phase
else:
  bubbling phase
```
 

# Code
# `onclick()`


<!DOCTYPE html>
<html>
  
<style>
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

<body>

  <div class="center">
    <button id="myBtn">Click me</button>
  </div>

<script>
// created button calls the function when user clicks on it. 
document.getElementById("myBtn").addEventListener("click", function(){
  // the function output this on the screen.
  document.write("Welcome to Educative")
});
</script>

</body>

</html>


codemirror

<!DOCTYPE html>
<html>
  
<style>
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

<body>

  <div class="center">
    <button id="myBtn">Click me</button>
  </div>

<script>
// created button calls the function when user clicks on it. 
document.getElementById("myBtn").addEventListener("mouseover", function(){
  // the function output this on the screen.
  document.write("Welcome to Educative")
});
</script>

</body>

</html>

<!DOCTYPE html>
<html>
  
<style>
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

<body>

  <div class="center">
    <button id="myBtn">Click me</button>
  </div>

<script>
// created button calls the function when user clicks on it. 
document.getElementById("myBtn").addEventListener("mouseout", function(){
  // the function output this on the screen.
  document.write("Welcome to Educative")
});
</script>

</body>

</html>

How to addEventListener() in Javascript

The addEventListener() method attaches an event handler to the specified element – it is supported in many browsers such as Google Chrome, Mozilla Firefox, Safari, Opera, and the latest versions of Internet Explorer. Syntax element.addEventListener(event, function, useCapture)  event: Required parameter. Name of the event that is to be clicked. Data type is string. function: Required parameter. The function is supposed to be executed when the event is clicked.  function can be both internal and external functions.  useCapture: Optional parameter. A boolean value indicates whether the event handler is supposed to be executed in the bubbling or the capturing phase. if true:   capturing phase else:   bubbling phase  Code onclick() 

How to addEventListener() in Javascript

Syntax

Code

`onclick()`

`mouseover`

`mouseout`