0

Изучаю чистый 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 и выше.

0

4 ответа 4

3

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>

2
  • А что даёт проверка if (!this.node) return; ? 6 авг 2019 в 17:23
  • @ДаниилКедров, если node не будет передан, то скрипт не запуститься
    – meine
    6 авг 2019 в 18:10
3

Нужно повесить событие на родителя, а у события обращаться 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>

8
  • Не могу понять, как это работает. Как получается передать menu без querySelector или getElement...? Обычно я бы задал переменную: let menu = document.getElementById('menu'). А тут почему-то и без этого работает 6 авг 2019 в 12:26
  • @ДаниилКедров если вы откроете в отладчике объект window, то сможете обнаружить там св-ва, имена которых это идентификаторы элементов со страницы, а значения - ссылки на них. 6 авг 2019 в 12:31
  • @ДаниилКедров let menu = document.getElementById('menu') никому не навредит 6 авг 2019 в 12:32
  • Понял, спасибо) 6 авг 2019 в 12:34
  • Но чем меньше кода, тем лучше же всегда, поэтому к этому и надо мне стремиться. У Вас получилась всего 1 строчка кода) 6 авг 2019 в 12:36
1

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>

5
  • @РустамГимранов исправил 6 авг 2019 в 10:45
  • @РустамГимранов очевидно же, что из-за заголовка вопроса "Делегирование JS", если повесить на прямую на каждую кнопку, то никакого делегирования не будет 6 авг 2019 в 10:49
  • 1
    @РустамГимранов я думаю потому что в заголовке мелькает делегирование 6 авг 2019 в 10:49
  • кстати строку const menu = document.querySelector('#menu'); можно просто убрать =) 6 авг 2019 в 10:50
  • @РустамГимранов ну да, судя по телу вопроса обработчик может висеть на каждом элементе... 6 авг 2019 в 11:06
0

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.