JS动态添加元素及绑定事件造成程序重复执行解决

JS动态添加元素及绑定事件是Web开发中常见的操作，可以让网页在用户交互过程中更加灵活，但有时候可能会遇到程序重复执行的问题。为了解决这个问题，我们可以采取以下方法。

1. 使用事件委托

事件委托是一种基于事件冒泡的机制，可以将事件绑定到父节点上，解决动态添加元素重复绑定事件的问题。具体操作如下：

//绑定事件
document.querySelector('.parent').addEventListener('click',function(e){
  if(e.target.tagName.toLowerCase() === 'button'){
    console.log(e.target.textContent);
  }
});
//动态添加元素
var parent = document.querySelector('.parent');
parent.innerHTML = '<button>Button 1</button><button>Button 2</button>';

在上述代码中，我们将事件绑定到父节点上，只有点击了button元素才会触发事件，从而避免了动态添加元素重复绑定事件的问题。

2. 使用事件解绑

另一种解决办法是在动态添加之前，先解绑之前绑定的事件，再重新绑定一次事件。具体操作如下：

//绑定事件
var btn = document.querySelector('.btn');
btn.addEventListener('click',func);
//解绑事件
btn.removeEventListener('click',func);
//动态添加元素
var container = document.querySelector('.container');
var newBtn = document.createElement('button');
newBtn.textContent = 'New Button';
container.appendChild(newBtn);
//重新绑定事件
newBtn.addEventListener('click',func);

在这个示例中，我们先使用removeEventListener方法解绑之前的事件，然后再使用addEventListener方法重新绑定事件，从而解决了动态添加元素重复绑定事件的问题。

综上所述，我们可以采用事件委托或事件解绑等方法，来解决JS动态添加元素及绑定事件所造成的程序重复执行的问题。