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％的情况就足够了。

删除一组事件侦听器

1 个答案: