javascript - 使用参数承载函数添加和删除事件监听器

Question

好吧，第一次在这里发帖。几天来，我一直在查看有关此问题的帖子，但找不到解决方法。

我有一个具有唯一 ID 的图像矩阵(基本上排列的球体)。我想为所述领域添加不同的功能。所以我继续添加事件监听器。到目前为止一切都很好。触发第一个事件后，我希望所有球体都更改其事件监听器，因此我继续删除所有事件监听器并添加新事件监听器。 我无法删除事件监听器。

添加事件:

for (let i = 0; i < 11; i++) {
    for (let j = 0; j < 11; j++) {
        if ((i > 1 && i < 9 && j > 1 && j < 9) && checkCorners(i, j) === true) {
            let ball = document.getElementById(i.toString() + j.toString());
            ball.addEventListener('click', removeBall(i, j));
        }
    }
}

removeBall():

var removeBall = function(i, j) {
    return function curried_func(ii, jj) {
        let ball = document.getElementById(i.toString() + j.toString());
        ball.src = "./public/assets/ball_empty.png";
    }
}

我正在使用 curried 函数方法，因为它是我尝试过的最后一种方法，除了从 e (事件)参数中检索对象数据之外，由于 e 未定义，这似乎不起作用。或使用处理程序。或者使用绑定(bind)。

删除事件:

for (let i = 0; i < 11; i++) {
    for (let j = 0; j < 11; j++) {
        if ((i > 1 && i < 9 && j > 1 && j < 9) && checkCorners(i, j) === true) {
            let ball = document.getElementById(i.toString() + j.toString());
            // ball.somethingToRevmoveEvent?
        }
    }
}

我确实觉得有必要提到它也是我的第一个 javascript 严肃项目，所以如果有人有更好的解决方案或解决方法(而不是为功能添加和删除事件 100 次)，请分享。

matrix for reference
- 用户应移除 1 个球，此时该点变为黑色，然后任何球都可以跳过另一个球以填充空白点(“跳过的球”被移除)。我认为这是某种中国跳棋谜题。

Answer 1

虽然柯里化(Currying)很好，但它意味着每次调用它都会返回一个新函数，而不是同一个函数的副本。您需要以某种方式保存对正在绑定(bind)的函数的引用，然后在删除事件监听器时使用它。如果没有其余代码的上下文，我将尝试在下面对其进行伪编码:

const eventMap = new Map();

function getMapKey(i, j) {
    return `${i},${j}`;
}

function addEvents() {
    for (let i = 0; i < 11; i++) {
        for (let j = 0; j < 11; j++) {
            if ((i > 1 && i < 9 && j > 1 && j < 9) && checkCorners(i, j) === true) {
                let ball = document.getElementById(i.toString() + j.toString());
                let removeBallFn = removeBall(i, j);
                let key = getMapKey(i, j);
                eventMap.set(key) = removeBallFn;
                ball.addEventListener('click', removeBallFn);
            }
        }
    }
}

function removeEvents() {
    for (let i = 0; i < 11; i++) {
        for (let j = 0; j < 11; j++) {
            if ((i > 1 && i < 9 && j > 1 && j < 9) && checkCorners(i, j) === true) {
                let ball = document.getElementById(i.toString() + j.toString());
                let key = getMapKey(i, j);
                let removeBallFn = eventMap.get(key) = removeBallFn;
                ball.removeEventListener('click', removeBallFn);
                eventMap.delete(key);
            }
        }
    }
}

这是未经测试的，因为我没有你的其余代码。原理是每次我们生成一个“移除”函数，我们将其存储在 Map (此处为 eventMap)使用基于 i 连接的唯一键和 j循环中该点的值。然后，当我们要删除时，使用相同的键将相同的“删除”函数从 map 中拉出，并将其传递给 removeEventListener .
还有其他方法可以做到这一点——这只是一种选择。考虑到代码的更大上下文，根据需要进行调整。希望这对你有用!