刪除一組事件偵聽器

Question

我有一堆事件監聽器，如下圖所示：

<a id="target0" >target0</a>

<div id="container">
   <a id="target1" >target1</a>
   <a id="target2" >target1</a>
   <a id="target3" >target1</a>
   .. more targets with event listeners
<script>
   document.getElementById("#target1").addEventListener("click", ...);
   document.getElementById("#target2").addEventListener("mouseover", ...);
   document.getElementById("#target3").addEventListener("mouseout", ...);
   ... 
</script>

</div>

<script>
   document.getElementById("#target0").addEventListener("click", ...); 
</script>

如何編寫一個函數來殺死所有DOM元素，並將事件監聽器綁定到容器div內（帶有函數引用或匿名函數）？

function killEvtListenersInsideContainerDiv(){
// loop to all DOM elements inside container that has event listeners and disable them
}

容器div由AJAX動態加載，因此其中的事件偵聽器會有所不同。 唯一一個“靜態”是target0。

Answer 1

如果你有超過ont容器，你應該為每個a添加內部類，如下所示：

<div>
    <a class="container1" id="#target1"></a>
    ...
</div>

要刪除事件有兩種方法，我推薦第二種方法，因為它更容易和更現代：1）使用本機javascript，只有在出於某些技術原因你不能使用jquery時

var elements = document.getElementsByClassName("container1");
elements.forEach(function(elem, i, arr) {
    element.removeEventListener("click");
}, this);

2）使用jquery：

  //set
   $('.container1').click(function() {
        alert("click");
   });
   //remove
   $('.container1').click(function(){}); //just empty function() :) the same as .click(null)

更新：如果你不能添加類使用此

JavaScript的：

 var elements = document.querySelector('#idDiv a'); //or '.classId a'
 elements.forEach(function(elem, i, arr) {
 element.removeEventListener("click");
}, this);

jQuery的

  $('#idDiv a).click(function(){});

沒有辦法檢查之前是否設置了事件，如果你真的需要，你應該用手實現這個功能（例如使用標志）。 如果功能已經存在，則新功能將始終覆蓋之前的功能。 99.9％的情況就足夠了。