Делегирование JS

108

16 мая 2021, 01:20

Изучаю чистый JavaScript. У меня есть три кнопки, которые обёрнуты в div. Необходимо сделать один обработчик для этих кнопок и разные действия по клику на каждую из них.

<!DOCTYPE html> 
<html lang="en"> 
<head></head> 
 
<body> 
  <div id="menu"> 
    <button data-color="day">День</button> 
    <button data-color="night">Ночь</button> 
    <button data-color="red">Красный</button> 
  </div> 
</body>

Все кнопки должны по клику делать alert с содержимым innerHTML. Интересно исполнение при помощи нового стандарта ES6 и выше.

Answer 1

class Menu { 
  constructor(node) { 
    this.node = node; 
 
    if (!this.node) return; 
 
    this.onClick = this.onClick.bind(this); 
 
    this.node.addEventListener('click', this.onClick, false); 
  } 
 
  onClick(e) { 
    const button = e.target.closest('button'); 
 
    if (!button) return; 
 
    const color = this.getColor(button); 
 
    console.log(color); 
  } 
 
  getColor(button) { 
    return button.getAttribute('data-color'); 
  } 
} 
 
const root = document.querySelector('#menu'); 
 
new Menu(root);

<div id="menu"> 
  <button data-color="day">День</button> 
  <button data-color="night">Ночь</button> 
  <button data-color="red">Красный</button> 
</div>

Answer 2

Нужно повесить событие на родителя, а у события обращаться e.target, который будет содержать ссылку на элемент, на котором по факту произошел клик.

let action = console.log 
menu.addEventListener('click', e => e.target !== menu && action(e.target.dataset.color))

<div id="menu"> 
  <button data-color="day">День</button> 
  <button data-color="night">Ночь</button> 
  <button data-color="red">Красный</button> 
</div>

Answer 3

const menu = document.querySelector('#menu'); 
 
menu.addEventListener('click', (e) => { 
  if (e.target.tagName === 'BUTTON') { 
    alert(e.target.innerHTML); 
  } 
});

<div id="menu"> 
  <button data-color="day">День</button> 
  <button data-color="night">Ночь</button> 
  <button data-color="red">Красный</button> 
</div>

Answer 4

foo(); 
function foo() { 
  let parent = document.getElementById('menu'); 
    if(!parent) return; 
     
  parent.addEventListener('click', (event) => { 
    // Получаем элемент по которому произошел клик 
    let target = event.target; 
      
     // Проверяем наш ли это элемент 
     if(target.tagName == 'BUTTON') { 
        let targetVal = target.innerHTML; 
        alert(targetVal); 
     } 
     
  }); 
   
}

<!DOCTYPE html> 
<html lang="en"> 
<head></head> 
 
<body> 
  <div id="menu"> 
    <button data-color="day">День</button> 
    <button data-color="night">Ночь</button> 
    <button data-color="red">Красный</button> 
  </div> 
</body>