javascript - 使用 EventTarget 的 removeEventListener

Question

我有一个带有按钮对象的数组。当它被点击时，它会得到“button-active”标签，当它再次被点击时，它会删除“button-active”类

当标志为真时，我想删除EventListener

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。

我应该如何解决这个问题？

标签： javascripthtml

Answer 1

简单~

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