Обработка событий JavaScript - добавление и удаление слушателя событий - httpdoc.ru

Обработка событий JavaScript - добавление и удаление слушателя событий

JavaScript Event Listene - addEventListener() метод используется для добавления обработчика событий к любому указанному элементу. Если существует более одного обработчика событий, этот метод присоединяет обработчик событий к элементу без перезаписи существующих обработчиков событий. При желании прослушиватель событий можно легко удалить с помощью removeEventListener() метода.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Event Listner </title> 
</head> 
<body>
  <button id="myBtn">Click Me</button>
 
 <script>
  // Defining custom functions
 function firstFunction() {
  alert("The first function executed successfully!");
  }
     
 function secondFunction() {
  alert("The second function executed successfully");
  }
     
  // Selecting button element
  var btn = document.getElementById("myBtn");
     
  // Assigning event handlers to the button
  btn.onclick = firstFunction;
  btn.onclick = secondFunction; // This one overwrite the first
</script>
</body>
</html>

Выход

JavaScript Event Listner

Слушатели мутильных событий

addEventListener() Метод используется для назначения нескольких обработчиков событий. Он присоединяет обработчик события к указанному элементу. Этот метод, описанный ранее, не перезаписывает предыдущие обработчики событий, поэтому рекомендуется использовать его вместо обычных обработчиков событий.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Event Listner </title> 
</head> 
<body>

 <button id="Btn">Click Me</button>
 
<script>
 // Defining custom functions
 function firstFunction() {
  alert("The first function executed successfully!");
   }
     
 function secondFunction() {
  alert("The second function executed successfully");
   }
     
  // Selecting button element
   var btn = document.getElementById("Btn");
     
   // Assigning event listeners to the button
 btn.addEventListener("click", firstFunction);
 btn.addEventListener("click", secondFunction);
</script>
</body>
</html>

Выход

JavaScript Event Listner

Удалить слушателей событий

removeEventListener() Метод используется для удаления слушателя событий , которые были прикреплены с помощью addEventListener() метода. В приведенном ниже примере сначала прослушиватель событий присоединяется addEventListener() методом, затем removeEventListener() метод используется для удаления назначенного прослушивателя событий.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript remove Event Listner </title> 
</head> 
<body>
 <button id="button">Click Me</button>
 
<script> 
 // Defining function
 function greetWorld() {
  alert("Hello World!");
  }
     
 // Selecting button element
 var button = document.getElementById("button");
     
 // Attaching event listener
 button.addEventListener("click", greetWorld);
    
 // Removing event listener
 button.removeEventListener("click", greetWorld);
</script>
</body>
</html>

Выход

JavaScript remove Event Listner

Примечание. Если вы нажмете кнопку «Click Me», ничего не произойдет, так как прослушиватель событий будет удален.