如何取消元素绑定的所有事件并添加新事件（不修改原事件代码）

嘿，我明白你的需求了——你想把一个已经绑了一堆事件的元素“重置”，去掉所有旧事件，只加新的，但又不想碰原来的事件代码。你之前的代码没成功，问题出在这几个地方：

• 你是在新绑定的事件处理函数里调用$(this).off()，这时候旧的事件其实已经触发了，而且这个操作只能移除直接绑定在元素上的jQuery事件，管不了那些通过事件委托绑定在父元素（比如document）上的事件。
• 事件委托的事件是存在父元素上的，所以直接在子元素#element上off()根本碰不到它们。

下面给你两种靠谱的解决思路，根据你的场景选：

方法一：精准移除所有相关事件（推荐，如果你知道事件类型） #

这个方法能针对性地移除所有直接绑定和委托绑定的事件，然后添加新事件：

$(document).ready(function() {
    // 1. 移除#element上所有直接绑定的jQuery事件
    $('#element').off();
    
    // 2. 移除所有委托在document上针对#element的click事件
    // 如果有其他事件类型（比如mouseover/change），可以单独添加或用$(document).off(null, '#element')移除所有委托事件
    $(document).off('click', '#element');
    
    // 3. 现在添加你的新事件
    $('#element').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        alert('test');
    });
});

补充说明： #

• 如果原有事件是原生JS绑定的（比如addEventListener或者onclick属性），需要额外处理：

  // 清空原生onclick属性
  document.getElementById('element').onclick = null;
  
  // 若知道原生事件的处理函数，可直接移除
  // document.getElementById('element').removeEventListener('click', oldHandler);
  

方法二：克隆元素替换原元素（万能解法，适合不清楚原有事件细节的情况） #

如果原有事件太复杂，完全不清楚绑定逻辑，最简单的办法就是克隆一个不带任何事件的新元素，替换掉原来的：

$(document).ready(function() {
    var $element = $('#element');
    // 克隆元素：不要加true参数，否则会复制原有事件和数据，我们要干净的新元素
    var $clone = $element.clone(false);
    
    // 用克隆元素替换原元素
    $element.replaceWith($clone);
    
    // 给新元素绑定你的目标事件
    $clone.on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        alert('test');
    });
});

这个方法的好处是不管原有事件是jQuery绑定还是原生JS绑定，都会被彻底清除——因为克隆出来的是全新的元素，不带任何事件监听。

内容的提问来源于stack exchange，提问作者Henrik Petterson