Javascript 为什么EventListener在删除并重新添加元素后不工作

我有一个p元素，其中附加了一个EventListener，但是在删除该元素并将其重新添加回DOM之后，侦听器就不再工作了

这是密码

var parent=document.querySelector（'.parent'）；
创建（1）；
document.querySelector（'p'）。addEventListener（'click'，function（）{
警报（“正常”）；
}，假）；
document.querySelector（'button'）。addEventListener（'click'，function（）{
刷新（）；
}，假）；
函数创建（n）{
var div=document.createElement（'div'）；
var p=document.createElement（'p'）；
var btn=document.createElement（'button'）；
p、 innerHTML='Dom Created'+n；
btn.textContent='单击'；
儿童组（p）；
儿童分部（btn）；
父、子（div）；
}
函数refreshDom（）{
clearDom（）；
创建（2）；
}
函数clearDom（）{
var div=document.querySelector（'div>div'）；
家长：远程儿童（div）；
}

---

为什么不工作：listenner只添加一次，并绑定到由

create（1）

quik-fix：将addlistener移动到create中

var parent=document.querySelector（'.parent'）；
创建（1）；
函数创建（n）{
var div=document.createElement（'div'）；
var p=document.createElement（'p'）；
var btn=document.createElement（'button'）；
p、 innerHTML='Dom Created'+n；
btn.textContent='单击'；
儿童组（p）；
儿童分部（btn）；
父、子（div）；
document.querySelector（'p'）。addEventListener（'click'，function（）{
警报（“正常”）；
}，假）；
document.querySelector（'button'）。addEventListener（'click'，function（）{
刷新（）；
}，假）；
}
函数refreshDom（）{
clearDom（）；
创建（2）；
}
函数clearDom（）{
var div=document.querySelector（'div>div'）；
家长：远程儿童（div）；
}

---

为什么不工作：listenner只添加一次，并绑定到由

create（1）

quik-fix：将addlistener移动到create中

var parent=document.querySelector（'.parent'）；
创建（1）；
函数创建（n）{
var div=document.createElement（'div'）；
var p=document.createElement（'p'）；
var btn=document.createElement（'button'）；
p、 innerHTML='Dom Created'+n；
btn.textContent='单击'；
儿童组（p）；
儿童分部（btn）；
父、子（div）；
document.querySelector（'p'）。addEventListener（'click'，function（）{
警报（“正常”）；
}，假）；
document.querySelector（'button'）。addEventListener（'click'，function（）{
刷新（）；
}，假）；
}
函数refreshDom（）{
clearDom（）；
创建（2）；
}
函数clearDom（）{
var div=document.querySelector（'div>div'）；
家长：远程儿童（div）；
}

您只需在元素

p

中添加事件侦听器

单击一次，但单击后元素
p
将被删除并重新创建一个。所以您需要再次将事件侦听器绑定到元素
p
 只需将事件侦听器
单击一次
添加到元素
p
，但单击后元素
p
将被删除并重新创建一个。所以您需要再次将事件侦听器绑定到元素
p
 您不是删除并重新添加相同的
元素，而是删除连接了侦听器的元素并添加一个全新的元素。您的
也是如此。如果希望新元素响应单击，则需要为其提供自己的侦听器：

function create (n) {
  var div = document.createElement('div');
  var p = document.createElement('p');
  var btn = document.createElement('button');

  p.innerHTML = 'Dom Created ' + n;
  p.addEventListener('click', function() {
    alert('ok');
  }, false);

  btn.textContent = 'click';
  btn.addEventListener('click', refreshDom, false);

  div.appendChild(p);
  div.appendChild(btn);
  parent.appendChild(div);
}

或者给父母一个只关注
的监听器，另一个只关注
的监听器：


var parent=document.querySelector（'.parent'）；
创建（1）；
parent.addEventListener（'click'，函数（事件）{
如果（！event.target.closest（'p'））返回；
警报（“正常”）；
}，假）；
parent.addEventListener（'click'，函数（事件）{
如果（！event.target.closest（'button'））返回；
刷新（）；
}，假）；
函数创建（n）{
var div=document.createElement（'div'）；
var p=document.createElement（'p'）；
var btn=document.createElement（'button'）；
p、 innerHTML='Dom Created'+n；
btn.textContent='单击'；
儿童组（p）；
儿童分部（btn）；
父、子（div）；
}
函数refreshDom（）{
clearDom（）；
创建（2）；
}
函数clearDom（）{
var div=document.querySelector（'div>div'）；
家长：远程儿童（div）；
}
您不是删除并重新添加相同的
元素，而是删除一个附加了侦听器的元素并添加一个全新的元素。您的
也是如此。如果希望新元素响应单击，则需要为其提供自己的侦听器：

function create (n) {
  var div = document.createElement('div');
  var p = document.createElement('p');
  var btn = document.createElement('button');

  p.innerHTML = 'Dom Created ' + n;
  p.addEventListener('click', function() {
    alert('ok');
  }, false);

  btn.textContent = 'click';
  btn.addEventListener('click', refreshDom, false);

  div.appendChild(p);
  div.appendChild(btn);
  parent.appendChild(div);
}

或者给父母一个只关注
的监听器，另一个只关注
的监听器：


var parent=document.querySelector（'.parent'）；
创建（1）；
parent.addEventListener（'click'，函数（事件）{
如果（！event.target.closest（'p'））返回；
警报（“正常”）；
}，假）；
parent.addEventListener（'click'，函数（事件）{
如果（！event.target.closest（'button'））返回；
刷新（）；
}，假）；
函数创建（n）{
var div=document.createElement（'div'）；
var p=document.createElement（'p'）；
var btn=document.createElement（'button'）；
p、 innerHTML='Dom Created'+n；
btn.textContent='单击'；
儿童组（p）；
儿童分部（btn）；
父、子（div）；
}
函数refreshDom（）{
clearDom（）；
创建（2）；
}
函数clearDom（）{
var div=document.querySelector（'div>div'）；
家长：远程儿童（div）；
}

回答得很好！但我希望您不要介意一个问题：我不完全理解
event.target.matches（'p'）
是如何工作的。这就是原因吗？：当单击
时，单击事件会弹出到parentElement，该元素通过
addEventListener
将事件处理程序附加到它，因此它会运行附件