事件监听查看、监听器删除方法

前言

最近在开发过程中遇上了不知在哪加入的点击事件，导致页面跳转发生问题，需要找到该点击事件并将其取消掉。以下就是在完成该目标过程中使用、尝试的方法。

1、事件查看

1. 使用网页开发者工具（F12）选取想查看的元素
2. 找到工具中的事件侦听器
3. 选择要查看的事件触发方式，在其中有多个事件，可以点击旁边的删除按键（垃圾桶），以此找到需要删除的目标事件
   

2、删除监听

情况1：通过上述查看操作找到对应的事件加入方法，事件采用addEventListener方法加入，知道事件加入的参数。
解决：采用removeEventListener取消事件。

button.addEventListener('click', handleClick);

button.removeEventListener('click', handleClick);

情况2：不知道加入事件的方法名称。
解决：采取删除匿名监听器的方式。

button.addEventListener('click', function() {
    // 操作
});

// 移除事件监听器
button.removeEventListener('click', function() {
  // 操作
}

加入匿名监听器如上，而后便是移除。

情况3：删除所有该dom元素的事件监听器。
解决：克隆、替换节点。

button.parentNode.replaceChild(button.cloneNode(true), button);
或者
button.replaceWith(button.cloneNode(true));

如此替换后通过 addEventListener附加的任何监听器都不会被保留。