删除一组事件侦听器

user6741031 发表于 Dev

用户名

我有一堆事件监听器，如下所示：

<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>

如何编写一个函数，该函数将杀死事件Listener绑定到容器div内的所有DOM元素（带有函数引用或匿名函数），从而杀死所有DOM元素？

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

容器div由AJAX动态加载，因此其中的事件侦听器将有所不同。唯一的一个“静态”是target0。

尼基塔

如果将有多个容器，则应为每个容器添加内部类a，如下所示：

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

要删除事件，有两种方法，我推荐第二种方法，因为它更简单，更现代：1）仅在由于某些技术原因而无法使用jquery的情况下，才使用本机javascript

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的