несколько обработчиков событий в одной функции

Question

Вместо того, чтобы создавать новую функцию для каждого обработчика кнопок, я хочу создать только одну функцию и обрабатывать все кнопки там. Я хочу, чтобы первая кнопка делала что-то отличное от второй .... Моя идея состояла в том, чтобы иметь один EventListener но как я узнаю, что target.id такой же, как btn1, например?

<div class="col-11" id="btns">
         <button class="btn btn-dark" id="btn1">Button 1</button>
         <button class="btn btn-dark" id="btn2">Button 2</button>
         <button class="btn btn-red" id="btn3">Button 3</button>
         <button class="btn btn-blue" id="btn4">Button 4</button>
</div>


let btn1=document.getElementById('btns');
btn1.addEventListener("click",doStuff);

function doStuff(e){
if(e.target.id===document.getElementById('btn1')){   //doesnt work
   console.log("Hello");
   }else if(e.target.id===.getElementbyId('btn2'){
      //doSomething...
       }
}

Answer 1

У вас правильный подход, в вашем коде просто ошибка:

e.target.id===document.getElementById('btn1')

Сравнивает идентификатор элемента, по которому щелкнули элемент, с идентификатором btn1.

То есть он сравнивает строку с элементом .

Естественно, это всегда будет возвращать false.

Вместо этого попробуйте:

e.target===document.getElementById('btn1')

Сравнивает элемент с элементом.

Или:

e.target.id==='btn1'

Сравнивает строку со строкой.

Необязательно: Вы можете упростить свой код, используя блок switch / case вместо набора if операторов. Вот как бы я написал ваш обработчик кликов:

function doStuff(e) {
    switch(e.target.id){
        case 'btn1':
            // Do something for btn1...
            break;
        case 'btn2':
            // Do something for btn2...
            break;
    }
}

Подробнее о switch / case: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch