在JavaScript按钮事件中，如何避免代码重复（当每个按钮都有类似的功能时）

我是JavaScript新手，正在尝试找出如何避免 为事件侦听器使用重复代码

我有一个带有几个按钮的html页面

在这个有两个按钮的示例中，（id'dtrip_1和trip_2）我想要这个按钮 单击时呈蓝色闪烁，几毫秒后继续执行代码的下一步

代码可以工作，但重复太多

这里我为每个按钮获取一个常量，然后添加一个事件侦听器 去吧。听众也会这样做

是否有一种建议的方法来避免为每个按钮编写重复的侦听器

我更喜欢让一个事件监听器监听所有按钮，然后对按下的按钮做出反应

let step_change_ms = 250

function setCurrentStep(step) {
  // removed, this function hides the elements not in use and
  // shows the currently needed ones
}

const tripButton1 = document.getElementById('trip_1');
tripButton1.addEventListener('click', event => {
    event.preventDefault();
    tripButton1.style.backgroundColor = "blue";

    buttons_active = false;
    myBooking.trips = 1;
    setTimeout(function () {
        setCurrentStep('step4')
    }, step_change_ms);
    setTimeout(function () {
        tripButton1.style.backgroundColor = "white";
    }, step_change_ms);
});

const tripButton2 = document.getElementById('trip_2');
tripButton2.addEventListener('click', event => {
    event.preventDefault();
    tripButton2.style.backgroundColor = "blue";
    buttons_active = false;
    myBooking.trips = 2;
    setTimeout(function () {
        setCurrentStep('step4')
    }, step_change_ms);
    setTimeout(function () {
        tripButton2.style.backgroundColor = "white";
    }, step_change_ms);
});

---

您可以这样做（虽然我不喜欢拆分id来获得号码，但这是一般的想法）：

让步骤改变\u ms=250
函数setCurrentStep（步骤）{
//删除后，此函数将隐藏未使用的元素，并且
//显示当前需要的
}
const myBooking={trips:0}；
document.querySelectorAll（'[id^=trip_u3;]'）。forEach（（el）=>{
常量[，num]=高程id拆分（“”）；
el.addEventListener（'单击'，事件=>{
event.preventDefault（）；
el.style.backgroundColor=“蓝色”；
按钮_active=false；
myBooking.trips=parseInt（num）；
console.log（myBooking）；
setTimeout（函数（）{
setCurrentStep（'step4'）
}，步骤改变）；
setTimeout（函数（）{
el.style.backgroundColor=“白色”；
}，步骤改变）；
});
});
1
2
您可以这样做（虽然我不喜欢拆分id来获取号码，但这是一般的想法）：


让步骤改变\u ms=250
函数setCurrentStep（步骤）{
//删除后，此函数将隐藏未使用的元素，并且
//显示当前需要的
}
const myBooking={trips:0}；
document.querySelectorAll（'[id^=trip_u3;]'）。forEach（（el）=>{
常量[，num]=高程id拆分（“”）；
el.addEventListener（'单击'，事件=>{
event.preventDefault（）；
el.style.backgroundColor=“蓝色”；
按钮_active=false；
myBooking.trips=parseInt（num）；
console.log（myBooking）；
setTimeout（函数（）{
setCurrentStep（'step4'）
}，步骤改变）；
setTimeout（函数（）{
el.style.backgroundColor=“白色”；
}，步骤改变）；
});
});
1
2
我认为解决方法非常简单。您需要创建一个单独的参数化函数，该函数根据传递的参数更改行为。例如，您可以创建一个工厂函数，该函数接受一些参数并返回一个新函数（事件处理程序）。代码如下所示：

function createEventListener(btn, trips) {
    return function(event) {
       event.preventDefault();
       btn.style.backgroundColor = "blue";
       buttons_active = false;
       myBooking.trips = trips;
       setTimeout(function () {
           setCurrentStep('step4')
       }, step_change_ms);
       setTimeout(function () {
          btn.style.backgroundColor = "white";
       }, step_change_ms);
    }
}
const tripButton1 = document.getElementById('trip_1');
tripButton1.addEventListener('click', createEventListener(tripButton1, 1));
const tripButton2 = document.getElementById('trip_2');
tripButton2.addEventListener('click', createEventListener(tripButton2, 2));

另外，请注意，这个例子可能有一些拼写错误，因为我没有验证它，但我希望这个想法是清楚的

p.p.S.尝试编写干（）代码并不总是好的，但最好专注于坚实的（）原则
我认为解决方案非常简单。您需要创建一个单独的参数化函数，该函数根据传递的参数更改行为。例如，您可以创建一个工厂函数，该函数接受一些参数并返回一个新函数（事件处理程序）。代码如下所示：

function createEventListener(btn, trips) {
    return function(event) {
       event.preventDefault();
       btn.style.backgroundColor = "blue";
       buttons_active = false;
       myBooking.trips = trips;
       setTimeout(function () {
           setCurrentStep('step4')
       }, step_change_ms);
       setTimeout(function () {
          btn.style.backgroundColor = "white";
       }, step_change_ms);
    }
}
const tripButton1 = document.getElementById('trip_1');
tripButton1.addEventListener('click', createEventListener(tripButton1, 1));
const tripButton2 = document.getElementById('trip_2');
tripButton2.addEventListener('click', createEventListener(tripButton2, 2));

另外，请注意，这个例子可能有一些拼写错误，因为我没有验证它，但我希望这个想法是清楚的

另外，尝试编写DRY（）代码并不总是好的，但最好关注SOLID（）原则