HTML DOM removeEventListener() Method

HTMLWeb DevelopmentFront End Technology

The DOM removeEventListener() method removes an event handler from an HTML element in an HTML document.

Syntax

Following is the syntax −

document.open(event,function,useCapture);

Here, event represent the event name, function specifies the function to remove and useCapture takes either true or false value.

Where true represent removes event handler from capturing phase and false represent removes event handler from bubbling phase.

Example

Let us see an example of removeEventListener() method −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-size:1.2rem;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .mycolor{
      background-color: #db133a;
   }
</style>
</head>
<body>
<h1>DOM removeEventListener() method Demo</h1>
<button class="btn hover-btn">Hover on me</button>
<button onclick="remove()" class="btn">Remove Event Handler</button>
<script>
   var hoverBtn=document.querySelector('.hover-btn');
   function toggleFun(){
      hoverBtn.classList.toggle("mycolor");
   }
   hoverBtn.addEventListener('mouseover',toggleFun);
   function remove(){
      hoverBtn.removeEventListener('mouseover',toggleFun);
   }
</script>
</body>
</html>

Output

This will produce the following output −

Hover on “Hover on me” button to observe the changes and then click on “Remove Event Handler” button to remove the event handler from the “Hover on me” button. Now, on

Now, on hover, nothing will happen −

raja
Published on 22-Jul-2019 12:28:45
Advertisements