Javascript addEventListener触发两次

我正在创建一个简单的电话簿，它将人名、姓氏和电话添加到一个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);
};

//向DOM中的所有div添加事件按钮
this.deleteBtnEvent=函数（）{
var_this=这个；
//获取当前在DOM上的所有div
var deleteBtn=document.getElementsByClassName（'delete'）；
对于（变量i=0；i

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

在

addContact（）

中，您调用

this.deleteBtnEvent（）

，可能是为了将删除绑定到刚才添加的删除按钮。但是，在

deleteBtnEvent（）

中，您将事件侦听器绑定到页面上的所有删除按钮。这意味着将发生以下情况：

添加联系人。新联系人将显示一个带有侦听器的删除按钮

添加第二个联系人。新联系人将显示一个包含侦听器的删除按钮，第二个侦听器将添加到第一个按钮

添加第三个联系人。新联系人将显示一个包含侦听器的删除按钮，第三个侦听器将添加到第一个按钮，第二个侦听器将添加到第二个按钮

等等

---

因此，在

deleteBtnEvent（）

中，不要向所有删除按钮添加（重复）侦听器。相反，只向刚刚通过

addContact（）

创建的删除按钮添加一个侦听器

它触发两次，因为您绑定了两次单击事件。您可以在代码中创建一个小提琴或附加整个代码段（至少一个小副本）。这样我就可以复制它了。你的JSFIDLE工作得很好…看看控制台错误