addEventListener触发两次
我正在创建一个简单的电话簿，它将个人姓名，姓氏和电话添加到一个div中，并添加到DOM中，并可以通过点击事件删除该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不存在，因为它已经被删除。 我想知道是否有办法解决这个问题。
在addContact() ，可以调用this.deleteBtnEvent() ，大概是将删除绑定到刚刚添加的删除按钮。 但是，在deleteBtnEvent()中，您将事件侦听器绑定到页面上的所有删除按钮。 这意味着会发生以下情况：
因此，在deleteBtnEvent() ，不要将侦听器添加（重复）到所有删除按钮。 相反，只能将侦听器添加到刚刚通过addContact()创建的删除按钮。