removeEventListener using the EventTarget

Question

我有一个包含按钮对象的数组。当它被点击时，它会得到"button-active"标记和当再次点击它时，它会移除"按钮活动"。类

我想removeEventListener当标志为真

let flag = false;
const buttonActive = () => {
    arr.forEach(e => {
        e.addEventListener("click", function eventListener(event){
            event.preventDefault()
            if(checkClass(e, "button-active")) removeClass(e, "button-active")
            else addClass(e, "button-active")
        })
    })
}
button.addEventListener("click", (event) => {
    event.preventDefault()
    let input = document.createElement('div')
    input.className = "info"
    input.innerHTML += `...(some html with buttons that have weekday class)...`
    info.appendChild(input)
    flag = true;
    arr = document.querySelectorAll('.weekday')
    buttonActive()
})

我想到了一种将eventListener函数放在buttonActive函数之外的方法，但是eventListener函数使用了变量e。

我该如何解决这个问题?

Answer 1

simple~

let flag = false;
let cbs = [];
const buttonActive = (arr, active) => {
    if (active) {
        cbs = arr.map(e => {
            const cb = (event) => {
                event.preventDefault()
                if(checkClass(e, "button-active")) removeClass(e, "button-active")
                else addClass(e, "button-active")
            }
            e.addEventListener("click", cb)
            return cb;
        });
    } else {
        for (int i = 0; i < arr.length; ++i) {
            arr[i].removeEventListener('click', cbs[i]);
        }
    }
}
// I guess this is the trigger button
button.addEventListener("click", (event) => {
    event.preventDefault()
    let input = document.createElement('div')
    input.className = "info"
    input.innerHTML += `...(some html with buttons that have weekday class)...`
    info.appendChild(input)
    flag = !!flag;
    arr = document.querySelectorAll('.weekday')
    buttonActive(arr, flag)
})