javascript - 如何删除匿名函数中的EventListener？

Question

我正在尝试使用 removeEventListener 但与 event.target.removeEventListener('click', myName, false); 一致是错误的。我尝试了不同的方法，但没有一个有效。

document.querySelector('#imagesContainer').addEventListener('click', function myName (event) {

    var images = this.formData.getAll('images[]');

    var picName = event.target.parentNode.dataset.name;

    var id = event.target.parentNode.getAttribute('id');
    var xxx = document.getElementById(id);
    xxx.outerHTML = "";

    delete xxx;

    for (var n = 0; n < images.length; n++) {
        if (images[n].name == picName) {
            var removedObject = images.splice(n, 1);
            removedObject = null;
            break;
        }
    }

    this.formData.delete('images[]');
    [].forEach.call(images, function(image){
        this.formData.append('images[]', image);
    }.bind(this));

    event.target.removeEventListener('click', myName, false);

}.bind(this), false);

Answer 1

因为您在 function myName 上 .bind(this) - 绑定(bind)创建了一个新函数，因此传递给点击处理程序的函数不是 myName ，它是绑定(bind)到 this 的 myName - 但您不能简单地将 .bind(this) 添加到删除代码，因为那将是不同的 myName与此绑定(bind)

一种解决方案是使用 IIFE 将 this“捕获”为 _this，然后使用 _this 而不是 this 在您的代码中:例如

document.querySelector('#imagesContainer').addEventListener('click', (function(_this) {
    return function myName (event) {
        // replace this with _this
        var images = _this.formData.getAll('images[]');
        var picName = event.target.parentNode.dataset.name;

        var id = event.target.parentNode.getAttribute('id');
        var xxx = document.getElementById(id);
        xxx.outerHTML = "";

        delete xxx;

        for (var n = 0; n < images.length; n++) {
            if (images[n].name == picName) {
                var removedObject = images.splice(n, 1);
                removedObject = null;
                break;
            }
        }

        _this.formData.delete('images[]');
        [].forEach.call(images, function(image){
            _this.formData.append('images[]', image);
        }.bind(_this));

        // here you can use this, because this will be the element that fired the click event
        this.removeEventListener('click', myName, false);
    };
}(this)), false);