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

Question

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

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

在这个带有 2 个按钮的示例中，（id'd trip_1和trip_2）我希望按钮在单击时闪烁蓝色，然后在几毫秒后继续执行代码的下一步

该代码有效，但重复过多。

在这里，我为每个按钮获取一个 const，然后为其添加一个事件侦听器。听者做的几乎一样。

有没有推荐的方法来避免为每个按钮编写重复的侦听器？

我宁愿让一个事件监听器监听所有按钮，然后对按下的按钮做出反应。

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);
});

标签： javascriptevent-handling

Answer 1

你可以做这样的事情（虽然我不喜欢拆分 id 来获取数字，但这是一般的想法）：

let step_change_ms = 250

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

const myBooking = { trips: 0 };

document.querySelectorAll('[id^=trip_]').forEach((el) => {
    const [ , num ] = el.id.split('_');
    el.addEventListener('click', event => {
        event.preventDefault();
        el.style.backgroundColor = "blue";

        buttons_active = false;
        myBooking.trips = parseInt(num);
        console.log(myBooking);
        setTimeout(function () {
            setCurrentStep('step4')
        }, step_change_ms);
        setTimeout(function () {
            el.style.backgroundColor = "white";
        }, step_change_ms);
    });
});

<button id="trip_1">1</button>
<button id="trip_2">2</button>

或者，也许更好：

let step_change_ms = 250

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

const myBooking = { trips: 0 };
const addListener = (el, num) => {
    el.addEventListener('click', event => {
        event.preventDefault();
        el.style.backgroundColor = "blue";

        buttons_active = false;
        myBooking.trips = num;
        console.log(myBooking);
        setTimeout(function () {
            setCurrentStep('step4')
        }, step_change_ms);
        setTimeout(function () {
            el.style.backgroundColor = "white";
        }, step_change_ms);
    });
}

addListener(document.getElementById('trip_1'), 1);
addListener(document.getElementById('trip_2'), 2);

    <button id="trip_1">1</button>
    <button id="trip_2">2</button>