有没有办法在 Javascript 中获取所有事件侦听器绑定？
[英]Is there a way to get all event-listener bindings in Javascript?
问题描述
I am searching for a way where I can list all event-listener bindings that are made with JS (or other scripts as well) on a website.
我正在寻找一种方法，可以在网站上列出使用 JS（或其他脚本）制作的所有事件侦听器绑定。 Mainly I want to find out double bindings (for debug reason), but I guess there are other issues for it as well.主要是我想找出双重绑定（出于调试原因），但我想它还有其他问题。
Brilliant would be a plugin for the browser, where you can see on the website which elements have which kinds of eventlisteners bound. Brilliant将是浏览器的插件，您可以在网站上看到哪些元素绑定了哪些类型的事件eventlisteners 。 You know, some visualization of the event-listeners...你知道，事件监听器的一些可视化......
3 个解决方案
解决方案1
4 2012-10-22 18:35:47
Visual Event ( http://www.sprymedia.co.uk/article/Visual+Event+2 ) is very helpful. Visual Event ( http://www.sprymedia.co.uk/article/Visual+Event+2 ) 非常有帮助。 Go to this page and just drag the "Visual Event" link into your bookmark bar.转到此页面，只需将“视觉事件”链接拖到书签栏中即可。 When you want to check a page, just click it, wait a second, and the events for each element will be overlaid on the page.当你想查看一个页面时，点击它，稍等片刻，每个元素的事件就会覆盖在页面上。
解决方案2
2 2015-06-10 10:39:22
I just wrote a script that lets you achieve this.我刚刚编写了一个脚本，可以让您实现这一目标。 It gives you two global functions: hasEvent(Node elm, String event) and getEvents(Node elm) which you can utilize.它为您提供了两个全局函数：您可以使用的hasEvent(Node elm, String event)和getEvents(Node elm) 。 Be aware that it modifies the EventTarget prototype method add/RemoveEventListener , and does not work for events added through HTML markup or javascript syntax of elm.on_event = ... , works only for add/RemoveEventListener .请注意，它修改了EventTarget原型方法add/RemoveEventListener ，并且不适用于通过 HTML 标记或elm.on_event = ... javascript 语法添加的事件，仅适用于add/RemoveEventListener 。
More info at GitHub GitHub 上的更多信息
Script:脚本：
var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();
解决方案3
2 2011-03-15 22:04:06
There's only one type of event declaration that you get it, I don't know if this will help you:你只有一种类型的事件声明，我不知道这是否对你有帮助：
// Can't get
myDiv.attachEvent ("onclick", function () {alert (1)});
// Can't get
myDiv.addEventListener ("click", function () {alert (1)}, false);
// Can't get
<div onclick = "alert (1)"></div>
// Can get
myDiv.onclick = function () {alert (1)}
You may look this answer too.你也可以看看这个答案。 Anyway I made a function for you:无论如何，我为你做了一个功能：
<!DOCTYPE html>
<html>
<head>
<script>
function getAllEvents () {
var all = document.getElementsByTagName ("*");
var _return = "";
for (var i = 0; i < all.length; i ++) {
for (var ii in all[i]) {
if (typeof all[i][ii] === "function" && /^on.+/.test (ii)) { // Unreliable
_return += all[i].nodeName + " -> " + ii + "\n";
}
}
}
return _return;
}
document.addEventListener ("DOMContentLoaded", function () {
var div = this.getElementsByTagName ("div")[0];
div.onclick = function () {
alert (1);
}
div.onmouseout = function () {
alert (2);
}
alert (getAllEvents ());
}, false);
</script>
<style>
div {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.