Question

我不想为每个按钮处理程序创建一个新函数，而是只创建一个函数并处理那里的所有按钮。我想要第一个按钮执行与第二个按钮不同的操作。...我的想法是拥有一个事件监听器但是我怎么知道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')

这会将单击的元素的ID与ID为“ 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

一个函数中有多个事件处理程序

1 个答案: