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

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

一种解决方案是使用IIFE来捕获＆＃34; 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);

Answer 2

如果首先保存对绑定函数的引用，则可以将其删除。

const fooBound = foo.bind({hello: 'world'});
btn.addEventListener('click', fooBound);
function foo(event) {
	console.log(this);
	btn.removeEventListener('click', fooBound);
}

<button id="btn">clicker</button>

如何在匿名函数中删除EventListener？

2 个答案: