Javascript 从DOM元素上的事件侦听切换

我正在寻找一个简单的函数来调用，而不需要任何关于DOM元素的参数

这将停止侦听绑定到该DOM元素及其所有子元素和子元素的所有事件

这将使DOM元素返回，以侦听调用函数1之前注册的所有事件。意味着将DOM元素恢复到以前的初始状态

我该怎么做呢

我在万维网上搜索过。我发现那很相关，但找不到我的答案

只是尝试一下：它删除了所有的事件处理程序。 所以，回调并不会使DOM元素回到以前的状态

那么我怎样才能实现我的目标呢

使用off之后，您需要再次绑定所有事件，类似这样

$('#yes').click(function () {
    $('.parent, .children,.grandchildren').on({
        mouseenter: function () {
            alert(this.innerHTML);
        },
        mouseleave: function () {
            alert(this.innerHTML);
        },
        click: function () {
            alert(this.innerHTML);
        }
    });
});  

---

您可以访问每个元素的内部事件列表，将该列表保存在某个位置，例如作为元素的属性，以便稍后还原，并将事件列表设置为null以删除所有事件处理程序。以下是演示代码：

HTML:

JS:

请注意，当所有事件处理程序初始注册一次时，上面的代码可以工作，如果可能会添加其他事件处理程序，则应在将列表设置为null之前将其保存到events属性中，如下所示：

$('input:checkbox').change(function(e){    
  if(this.checked) elements.each(function(i,elem){
    //save first to restore later
    elem.events = $._data(elem, "events");
    //off
    $._data(elem, "events", null);
  }) 
  else elements.each(function(i,elem){
    //on
    $._data(elem, "events", elem.events);
  })
});

---

请您在投票前留下评论，以结束问题或投票。不是投票人，但您的DOM结构是什么，以及哪些确切的代码不适用于您，这将有助于诊断问题。在JSFIDE上有一个例子也会有所帮助。您已经阅读了jQuery文档了吗？我已经看到了一个关于开关动作的很好的解释。api.jquery.com/off/单击off后，这里是JSFIDLE。。。你再也不能在div上播放了div将永远停止收听这是我不想再次将所有事件重新绑定的内容。在编辑的小提琴中，再次使用重新绑定。。。我不想重新绑定，只是从倾听状态切换到不倾听状态，反之亦然-verce@Koka你需要。。。你总是需要在关机后重新绑定1.你的回答非常符合我的需要。但我仍然认为，这种类型的功能在DOM元素上设置了一道阻挡墙，默认情况下，它将过滤到它及其所有子元素的事件侦听器。@Koka如果您想通过事件名称进行更深入的过滤，例如单击，那么您可以通过$获得所有单击事件处理程序。_dataelem，events[click]。下面是演示如何打开/关闭“仅单击”处理程序。您可以基于此来完成代码。

#container {
  padding:30px;
  background:red;
  width:200px;    
}
h2 {
  cursor:pointer;
}
#container > div {
  background:green;
  padding:30px;
}

//init events handlers
$('h2').click(function(e){
  alert('clgt?');
});
$('#container > div').hover(function(e){
    this.style.background = 'blue';
  }, function(e){
    this.style.background = 'green';
});

$('#container').hover(function(e){
    this.style.background = 'orange';
  }, function(e){
    this.style.background = 'red';
});

var elements = $('#container, #container *');

elements.each(function(i, e){
    //access to the events list of each element and save that list
    //into a property called events
    e.events = $._data(e, "events");      
});

$('input:checkbox').change(function(e){    
  if(this.checked) elements.each(function(i,elem){
    //off
    $._data(elem, "events", null);
  }) 
  else elements.each(function(i,elem){
    //on
    $._data(elem, "events", elem.events);
  })
});

$('input:checkbox').change(function(e){    
  if(this.checked) elements.each(function(i,elem){
    //save first to restore later
    elem.events = $._data(elem, "events");
    //off
    $._data(elem, "events", null);
  }) 
  else elements.each(function(i,elem){
    //on
    $._data(elem, "events", elem.events);
  })
});