Методи підключення подій в VanillaJS

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

5 способів підключення подій у JavaScript

1. Inline підключення
2. Атрибут onclick до знайденого Element
3. Метод addEventListener()
4. Динамічне додавання елементів у DOM
5. Підвішування обробника на батьківський елемент

1. Inline підключення

   <button type="button" оnclick="alert(’click — 1’)">Click me</button>

   
   

2. Підключення через атрибут onclick до знайденого Element

   <button id="button" type="button">Click me</button>

   const $button = document.getElementById("button");

   $button.onclick = function() {

   	alert("click — 2″);

   };

   
   

3. Метод addEventListener()

   <button id="button" type="button">Click me</button>

   const $button = document.getElementById("button");

   $button.addEventListener("click", function() {

   	alert("click — 3″);

   });

   // у метода є третій необов’язковий параметр options, код нижче означає, що функція визветься тільки один раз

   const $buttonOnce = document.getElementById("button-once");

   $buttonOnce.addEventListener("click", function() {

   	alert("click — 3 once");

   }, {once: true});

   // зазначу, обробник з анонімною функцією неможливо відключити, для цього функція повинна мати ім’я

   $button.addEventListener("click", myFunction);

   // відключаємо

   $button.removeEventListener("click", myFunction);

   
   

4. Спосіб з динамічним додаванням елементів у DOM

   <div id="wrapper"></div>

   const $wrapper = document.getElementById("wrapper");

   const $button = document.createElement("button“);

   $button.innerHTML = “Click me”;

   $button.addEventListener("click", function() {

   		alert("click — 4″);

   });

   $wrapper.append($button);

   
   

5. Підвішування обробника на батьківський елемент

   Припустимо ми маємо декілька кнопок у компоненті, кожна з них має свою функцію — add, edit, delete.

   <div id="js-buttons">

   		<button class="js-add">Add</button>

   		<button class="js-edit">Edit</button>

   		<button class="js-delete">Delete</button>

   </div>

   const buttons = document.getElementById("js-buttons");

   buttons.addEventListener("click", function(event) {

   		const $target = event.target;

   		if ($target.classList.contains("js-add")) {

   			alert("click — add 5″);

   		} else if ($target.classList.contains("js-edit")) {

   			alert("click — edit 5″);

   		} else if ($target.classList.contains("js-delete")) {

   			alert("click — delete 5″);

   		};

   });

   
   

Висновки