Question

我创建了一个简单的电话簿，它将人名，姓氏和电话添加到div中并添加到DOM中，并可选择使用click事件删除此div。我有一个名为Phonebook的类，它包含以下两个函数：

//add an event button to all divs inside the DOM
this.deleteBtnEvent = function(){
    var _this = this;
    //get all the divs that currently on the DOM
    var deleteBtn = document.getElementsByClassName('delete');
    for (var i = 0; i < deleteBtn.length; i++) {
        deleteBtn[i].addEventListener('click', function(e){
            _this.removeContact(e.target.parentElement.attributes.index.value);
        });
    }   
};

//remove the div from the array and from the DOM
this.removeContact = function(index){
    var contactsHolder = document.getElementById('contacts');
    var contact = document.getElementsByClassName('contact');
    this._contacts.splice(index, 1);

    contactsHolder.removeChild(contact[index]);

    //update localstorage
    var stringArr = JSON.stringify(this._contacts);
    localStorage.setItem('data', stringArr);

    console.log('current: ');
    console.log(this._contacts);
};

由于某种原因，addEventListener会触发两次。第一次调用addEventListener时，该函数从DOM和数组中删除div，第二次触发监听器，我得到一个错误，因为具有相同ID的div不存在，因为它已经删除了。我想知道是否有办法解决这个问题。

Answer 1

在addContact()中，您调用this.deleteBtnEvent()，大概是将删除绑定到刚刚添加的删除按钮。但是，在deleteBtnEvent()中，您将事件侦听器绑定到页面上的所有删除按钮。这意味着将发生以下情况：

添加联系人。新联系人将显示一个带有监听器的删除按钮。
添加第二个联系人。新联系人将显示一个带有监听器的删除按钮，和第二个监听器将被添加到第一个按钮。
添加第三个联系人。新联系人将显示一个带有监听器的删除按钮，和第三个监听器将添加到第一个按钮，第二个监听器将添加到第二个按钮。
等...

因此，在deleteBtnEvent()中，不要向所有删除按钮添加（复制）侦听器。相反，只需将侦听器添加到刚刚通过addContact()创建的删除按钮。

addEventListener触发两次

1 个答案: