Question

我正在寻找一个简单的函数来调用（没有任何参数）DOM元素

这将停止收听绑定到该DOM元素以及所有子女和大孩子的所有事件。
这将带回DOM元素以回听在调用函数1之前注册的所有事件。意味着将DOM元素恢复到之前的初始状态。

我该怎么做。

我搜索过www。我发现非常相关http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/但是找不到我的答案

尝试off（）：它删除了所有事件处理程序。因此，回调（）并不会将DOM元素带回以前的状态。

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

Answer 1

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

<强> HTML ：

<div id='container'>
  <h2>Click me</h2>
  <div>
    Hover me
  </div>    
</div>
<label><input type='checkbox'/>Remove events</label>

<强> CSS ：

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

<强> JS ：

//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);
  })
});

Demo.

请注意，上述代码适用于所有事件处理程序在初始时注册一次，如果可能还有其他事件添加，则应在设置之前将列表保存到events属性中这样null：

$('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);
  })
});

Answer 2

Fiddle

使用off()之后，您需要再次绑定所有事件，例如

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

Working Fiddle asked in the question

Based on my answer here

从事件侦听DOM元素切换

2 个答案:

Demo.

Fiddle