javascript - 如何找到任何元素的绑定(bind)事件

Question

让，

<span onclick="foo()" onfocus="goo()">Have Event</span>

这里我只是举个例子。这里与 span 两个事件已经绑定(bind)。

有没有javascript或jquery方法来找出与任何html元素绑定(bind)的所有事件？

Answer 1

您不能使用 DOM2 样式的事件处理程序(通过 addEventListener/attachEvent 添加的事件处理程序)，这几乎意味着您不想这样做DOM2+ 处理程序越来越成为其应有的完成方式^(tm)。

不过，您在示例中显示的是 DOM0 事件处理程序，您可以检查它们:您可以循环遍历元素上的属性，查看从与“on”，看看它们是否有值:

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`
    }
}

更新:

显然，至少在 Chrome 上，onXyz 属性是不可枚举的，因此它们不会出现在 for..in 循环中。在 Firefox 上，您只能看到以编程方式分配的值，而不是通过属性分配的值。

因此，您可以明确地测试它们:

if (element.onclick) {
    // It has a DOM0-style `click` handler
}

...但是您必须有一个您想了解的列表。

这是一个示例( 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");
}

不过请再次注意，您可能不想这样做，因为您会错过 DOM2+ 处理程序。

另请注意，当您单击某个元素时，即使该元素没有该事件的事件处理程序，也可能会处理该事件 - 因为该事件可以冒泡到父级，而父级会查看event.target，查看相关子项，并采取适当的操作。这就是事件委托(delegate)的工作方式，而且它也越来越成为完成它的方式^(tm)，所以... :-)