Get DOM event listeners
216 views
Skip to first unread message
websta
Jan 3, 2012, 8:33:52 AM1/3/12
to Chromium-extensions
Hi,
I'm trying to detect if a DOM has event listeners attached. Something
like the Event Listener list displayed in the Dev Panel.
Thanks,
I'm trying to detect if a DOM has event listeners attached. Something
like the Event Listener list displayed in the Dev Panel.
Thanks,
Łukasz Łoboda
Jan 5, 2012, 8:26:02 AM1/5/12
to Chromium-extensions
indeed you can and it is very simple
<html>
<head></head>
<body>
<div id="element"></div>
<script type="text/javascript">
Element.prototype.coreAddEventListener =
Element.prototype.addEventListener;
Element.prototype.addEventListener = function(type,handler,capture)
{
this.haveHandlers = true;
this.coreAddEventListener(type,handler,capture);
};
var elem = document.getElementById('element');
elem.addEventListener('click',function(){alert(1)},false);
elem.addEventListener('click',function(){alert(2)},false);
if(typeof elem.haveHandlers != 'undefined' && elem.haveHandlers) {
alert('element have some handlers');
}
</script>
</body>
</html>
Of course you should as well reimplement removeListener method
prototype and add some sort of counters (as element can have many
listeners on one action). I hope it will help you a little. Btw.
remember to do it at document_start before any website code execution
<html>
<head></head>
<body>
<div id="element"></div>
<script type="text/javascript">
Element.prototype.coreAddEventListener =
Element.prototype.addEventListener;
Element.prototype.addEventListener = function(type,handler,capture)
{
this.haveHandlers = true;
this.coreAddEventListener(type,handler,capture);
};
var elem = document.getElementById('element');
elem.addEventListener('click',function(){alert(1)},false);
elem.addEventListener('click',function(){alert(2)},false);
if(typeof elem.haveHandlers != 'undefined' && elem.haveHandlers) {
alert('element have some handlers');
}
</script>
</body>
</html>
Of course you should as well reimplement removeListener method
prototype and add some sort of counters (as element can have many
listeners on one action). I hope it will help you a little. Btw.
remember to do it at document_start before any website code execution
Michael Spector
Jan 18, 2012, 10:47:09 AM1/18/12
to Chromium-extensions
Unfortunately this doesn't capture event listeners added in the
content document.
I have the following script:
(function(original) {
Element.prototype.addEventListener = function(type, listener,
useCapture) {
if (typeof (this._handlerTypes) == 'undefined') {
this._handlerTypes = {};
}
this._handlerTypes[type] = true;
return original.apply(this, arguments);
}
})(Element.prototype.addEventListener);
(function(original) {
Element.prototype.removeEventListener = function(type, listener,
useCapture) {
if (typeof (this._handlerTypes) != 'undefined') {
delete this._handlerTypes[type];
}
return original.apply(this, arguments);
}
})(Element.prototype.removeEventListener);
Which I include into manifest.json:
"content_scripts" : [
{
"matches" : [ "http://*/*", "https://*/*" ],
"js" : [ "events_spy.js" ],
"run_at" : "document_start",
"all_frames" : true
},
...
]
Then, I open the following example page:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id="test" href="#">Click here</a>
<script type="application/javascript">
document.getElementById("test").addEventListener("click",
function() { alert("clicked"); }, false);
</script>
</body>
</html>
But debugger doesn't stop on a break-point set inside custom
addEventListener() handler function.
What am I doing wrong?
Thanks,
Michael
content document.
I have the following script:
(function(original) {
Element.prototype.addEventListener = function(type, listener,
useCapture) {
if (typeof (this._handlerTypes) == 'undefined') {
this._handlerTypes = {};
}
this._handlerTypes[type] = true;
return original.apply(this, arguments);
}
})(Element.prototype.addEventListener);
(function(original) {
Element.prototype.removeEventListener = function(type, listener,
useCapture) {
if (typeof (this._handlerTypes) != 'undefined') {
delete this._handlerTypes[type];
}
return original.apply(this, arguments);
}
})(Element.prototype.removeEventListener);
Which I include into manifest.json:
"content_scripts" : [
{
"matches" : [ "http://*/*", "https://*/*" ],
"js" : [ "events_spy.js" ],
"run_at" : "document_start",
"all_frames" : true
},
...
]
Then, I open the following example page:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id="test" href="#">Click here</a>
<script type="application/javascript">
document.getElementById("test").addEventListener("click",
function() { alert("clicked"); }, false);
</script>
</body>
</html>
But debugger doesn't stop on a break-point set inside custom
addEventListener() handler function.
What am I doing wrong?
Thanks,
Michael
websta
Nov 25, 2012, 11:41:37 PM11/25/12
to chromium-...@chromium.org
Michael,
I'm having the same issue, did you get to resolve this?
Thanks
I'm having the same issue, did you get to resolve this?
Thanks
Michael Spector
Nov 26, 2012, 1:01:43 AM11/26/12
to websta, chromium-...@chromium.org
I use the same code. The only difference is that instead of setting a property "_handlerTypes" I'm attaching an argument using "setAttribute", which contains all event types being listened by the element.
--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/-/RXUA8Aq1IB0J.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
Reply all
Reply to author
Forward
0 new messages