Reputation: 87073
Let,
<span onclick="foo()" onfocus="goo()">Have Event</span>
Here I give this just for example. Here with the span
two events have bind.
Is there any javascript or jquery way to find out all events bind with any html element?
Upvotes: 0
Views: 6186
Reputation: 4888
If it's just for curiosity, and you don't need this data processed further by any script you can use visual event bookmarklet.
Upvotes: 0
Reputation: 1097
I dont know how to get all the events but we can get it by specifying it.. Here is the JQuery code to track elements and events for onclick, onfocus and onblur..
<div id="log"></div>
<script language="javascript">
$('*[onclick],*[onblur],*[onfocus]').each(function () {
if($(this).attr('onclick'))
$('#log').html($('#log').html()+'<br>'+this.tagName+' : onclick : '+$(this).attr('onclick'));
if($(this).attr('onblur'))
$('#log').html($('#log').html()+'<br>'+this.tagName+' : onblur : '+$(this).attr('onblur'));
if($(this).attr('onfocus'))
$('#log').html($('#log').html()+'<br>'+this.tagName+' : onfocus : '+$(this).attr('onfocus'));
});
</script>
Upvotes: 1
Reputation: 1074385
You can't with DOM2-style event handlers (ones added with addEventListener
/ attachEvent
), which pretty much means you don't want to be doing this as DOM2+ handlers are increasingly The Way It Shall Be Done(tm).
The ones you've shown in your example are DOM0 event handlers, though, which you can check for: You can loop through the properties on the element, looking at the ones starting with "on", and see whether they have a value:
var element = document.getElementById("theSpan");
var name;
for (name in element) {
if (name.substring(0, 2) === "on" && element[name]) {
// It has a DOM0 handler for the event named by `name`
}
}
Update:
Apparently, at least on Chrome, the onXyz
properties are non-enumerable so they don't show up in for..in
loops. And on Firefox, you only see the ones assigned programmatically, not via attributes.
So, you can test them explicitly:
if (element.onclick) {
// It has a DOM0-style `click` handler
}
...but you'll have to have a list of the ones you want to know about.
Here's an example (live copy):
HTML:
<p id="thePara" onclick="foo()">This is the paragraph</p>
<script>
// Some other bit of code setting a DOM0 handler programmatically
document.getElementById("thePara").onmousedown = function() {
display("<code>onmousedown</code> called for thePara");
};
</script>
JavaScript:
window.onload = function() {
// Look up all handlers on thePara
var element = document.getElementById("thePara");
var name;
var names = "onclick onmousedown onchange onmouseup".split(" ");
var index;
for (name in element) {
if (name.substring(0, 2) === "on" && element[name]) {
display("[loop check] thePara has handler for <code>" + name + "</code>");
}
}
for (index = 0; index < names.length; ++index) {
name = names[index];
if (element[name]) {
display("[explicit check] thePara has handler for <code>" + name + "</code>");
}
}
};
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
function foo() {
display("<code>foo</code> called");
}
Note again, though, that you probably don't want to do this, as you'll miss DOM2+ handlers.
Also note that an event may be handled when you click an element even though that element doesn't have an event handler for the event — because the event can bubble to the parent, which looks at the event.target
, sees the relevant child, and takes appropriate action. This is how event delegation works, and it too is increasingly The Way It Shall Be Done(tm), so... :-)
Upvotes: 3
Reputation: 78691
If I remember well, .data('events')
stores all the bound events of the element.
In jQuery 1.4.3 setting an element's data object with .data(obj) extends the data previously stored with that element. jQuery itself uses the .data() method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.
This method only works though for events that are bound through jQuery.
Upvotes: 1