js获取绑定到某元素上的事件

1、如果绑定在了元素的事件属性上，则可以获取到。

例1-1:

var div = document.getElementById('div') ;
// 绑定
div.onclick = function(){ console.log( '点击了div' ); }
// 获取绑定
console.log( document.getElementById('div').onclick ) ;
// 打印出： function () { console.log('点击了div'); }
// 如果未定义onclick的属性事件，则打印出：null

2、如果是用addEventListener绑定的事件，则是获取不了已经绑定的事件的。

- 不过chrome的控制台可以拿到

getEventListeners( ele )可以返回ele元素已绑定事件的对象列表。仅限调试模式的console里面使用，代码里跑是不行的。所以对开发并没有什么帮助。

- 控制面板的Elements面板右侧的Event Listeners子面板里面有选中元素的已绑定的事件列表。

- 之前DOM 3事件模型上有个提案，建议在元素上添加一个eventListenerList属性来保存已经绑定过的事件，但是貌似没有通过。所以addEventListener绑定的事件，想要获取已经绑定的事件处理器，是没有任何直接的机制获取的。

3、如果实在想知道某个元素绑定过哪些事件，只能自己实现一个类似的精简版的缓存机制了。绑定过的标记一下，存在全局变量里，存在对应的元素上等等。对应于某些具体场景，可以先removeEventListener然后addEventListener，不过局限性很大。

4、常用类库一般都封装了常用的事件操作，绑定，解绑之类的；一般都会缓存已经绑定的事件，所以从它里面可以拿到某个元素已经绑定的事件。

比如jquery

例1-2:

var clickEvents = $( ele ).data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
    alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
    // also available: handlerObj.type, handlerObj.namespace
})

5、开发模式的调试阶段，你可以试试：visual event

中文简介：《Visual Event ：快速查看 DOM 上绑定的 JS 事件》

参考资料🔗

1、How to find event listeners on a DOM node when debugging or from the JavaScript code?

2、js 有没有办法判断一个dom元素是否已经绑定了某个事件？？