如何将参数传递给 eventListener 函数，然后删除该函数？ [复制]

【问题标题】：How to pass arguments to eventListener function and later remove that function? [duplicate]如何将参数传递给 eventListener 函数，然后删除该函数？ [复制]
【发布时间】：2018-02-10 18:34:52
【问题描述】：

if(allSquares[block].classList.toggle("showPath"))
        {
            allSquares[block].addEventListener('click', moveAbleBoxes);
            moveAbleBoxes.bind(this, i, j, piece);
            //moveAbleBoxes(this, i, j, piece);
        }
        else {
            allSquares[block].removeEventListener('click', moveAbleBoxes);
            console.log('listener removed');
        }

我想以某种方式将这些参数传递给函数“moveAbleBoxes”，然后我还想删除那个 eventListener。所以我不能使用匿名函数。

【问题讨论】：

标签： javascript

【解决方案1】：

当您在函数上调用 bind 时，它会返回一个具有绑定属性的新函数。只需存储函数，以便稍后检索它以删除事件处理程序。

var moveAbleBoxesB = {};
...
    if(allSquares[block].classList.toggle("showPath"))
    {
        moveAbleBoxesB[block] = moveAbleBoxes.bind(this, i, j, piece);
        allSquares[block].addEventListener('click', moveAbleBoxesB[block]);
        //moveAbleBoxes(this, i, j, piece);
    }
    else {
        allSquares[block].removeEventListener('click', moveAbleBoxesB[block]);
        console.log('listener removed');
    }

【讨论】：

非常感谢。现在它的工作。但是 moveAbleBoxesB[block] = moveAbleBoxes.bind(block, i, j, piece);我发送的值是 (38, 7, 7, 'abc')，而我正在接收的函数内部 (7, 7, 'abc', [object MouseEvent]) 第一个值 i,e 38 丢失了。