如何检查JavaScript事件处理程序是否已设置？

Question

我有一个JavaScript函数，可以设置一些HTML节点的“onclick”事件 - 即使该“onclick”事件已经被设置过。

我如何检查是否已经设置了该事件，以便我可以扩展我的函数仅在尚未设置该事件的HTML节点上设置该事件？

- user4531

Answer 1

像这样检查：

if(typeof someNode.onclick == "function") {
   // someNode has an event handler already set for the onclick event...
}

顺便提一句，如果你正在使用一个库，你应该说明一下 - 如果是的话，这可能会更容易/更清晰，并且会根据你使用的库而有所不同...

- Jason Bunting

---

如果开发者在Mozilla中使用类似于button.addEventListener('click', buttonPressed, true);这样的东西呢？ - AlannY

这种方法无法处理使用 attachEvent 或 addEventListener 设置的事件处理程序。 - Jonathan Fingland

我意识到这一点，但由于提问者没有明确说明他是如何连接这些东西的，所以我假定使用了DOM 0的方法。 - Jason Bunting

顺便说一下，这确实是一篇维基文章——请随意编辑我的回复并添加更强大的代码... :P - Jason Bunting

.onclick 似乎与 .mouseenter 的工作方式不同 :( - john k

@johnktejik，你漏掉了一个“on”。请将它改为“.onmouseenter”。 - aaaaaaaaaaaa

Answer 2

通过拦截函数调用，应该可以检测到使用<element>.addEventListener()附加的事件处理程序：

var myListOfAddedEvents = [];

var realAddEventListener = HTMLElement.prototype.addEventListener;

HTMLElement.prototype.addEventListener = function(evtType,fn,cap) {
    myListOfAddedEvents.push(
        {on: this, type: evtType, handler: fn, capture: cap}
    );

    return realAddEventListener.apply(this, arguments);
};

注意：这是未经过测试的代码，可能需要一些修改。我希望同一个函数可以用于所有元素类型，但我可能错了。此外，它只能在开始添加事件之前运行这段代码时才能起作用。attachEvent的副本可以采用相似构造。

- joeytwiddle

---

你可能想要结合Jason Bunting的技巧。因为有两种注册事件处理程序的方式，我们需要使用两种不同的技术来找到它们！ - joeytwiddle

Answer 3

<input type="button" id="foo" name="foo" value="bar" />

<script type="text/javascript">
    alert(document.getElementById('foo').onclick); //undefined
</script>

所以你想要做的是像这样：

<script type="text/javascript">
    if (undefined == document.getElementById('foo').onclick)
    {
        // Add event handler
    }
</script>

- Philippe Gerber

---

这对于使用 attachEvent 或 addEventListener 设置的事件处理程序无效。 - Jonathan Fingland