Question

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?

Answer 1

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… 🙂