How to check if event is applied on an element with javascript?

Question

Browsed the web and stackoverflow without luck.

How to check if a particular event is applied on top of a specific element. Let's say I am doing like this:

function addEvent(elem, event, fn) {
if (elem.addEventListener) {
    elem.addEventListener(event, fn, false);
} else {
    elem.attachEvent("on" + event, function() {
        return(fn.call(elem, window.event));   
    });
}

}

      addEvent(document, 'scroll', onScroll);

function onScroll() {console.log("scroll"}

How I could check dynamically if my event is bound to the document? Thank you.

how would an event be bound unless you (or some other code you loaded) put it there? — Alnitak, Mar 19 '15 at 11:32

score 0 · Answer 1 · answered Mar 19 '15 at 11:32

You've said "in JavaScript" so I'm guessing you want to do this in code, not (say) in a debugger or something.

The DOM doesn't provide a means of doing that, I'm afraid, so you can't without doing something in addition to setting up the handler.

You could, for instance, add an expando property, data-* attribute, or class to the element to mark it, so that you can check for that later.

score 0 · Answer 2 · answered Mar 19 '15 at 11:52

0

You should avoid using attachEvent, even in old IE browsers (< 9): if you have to support them it's better using a reimplementation of the event system that uses on[event] properties – attachEvent has several bugs, for example the contextual element is broken, the order of the listeners are random, etc.

Said that, you can compare the event.target with the current this:

function onClick(event) {
  if (event.target === this) {
    console.log("original dispatcher");
  } else {
    console.log("inner elements")
  }
}

document.body.addEventListener("click", onClick, false);

That's also work if you use document.body.onclick to set the listener.

answered Mar 19 '15 at 11:52

ZER0

24,846
5
51
54

*"for example the contextual element is broken"* If you have to use `attachEvent`, that's easily dealt with; [see this answer](http://stackoverflow.com/a/23799448/157247). *"the order of the listeners are random"* No, not random, just the opposite of `addEventListener`'s order. I would strongly advocate **not** using `onXyz` instead. There's an argument for using a *single* handler attached via `attachEvent` that then does the dispatching (like jQuery does), but not for using `onXyz` for it (as `onXyz` and `addEventListener` coexist). – T.J. Crowder Mar 19 '15 at 11:57
How does this answer the question "How to check if event is applied on an element with javascript?"? – T.J. Crowder Mar 19 '15 at 11:58
I honestly prefer using `on[event]`, compare to the code in the answer you suggested, or as you said using only one `attachEvent`, that basically is the same I said – using a reimplementation of event system, like jQuery does – rather than the code you suggested. The execution of the listener is random, at least it was in the past, and the documentation seems still confirm that (see: https://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx) – ZER0 Mar 19 '15 at 12:01
I interpreted the question as checking at listener's execution if the listener was attached on top of that specific element or not; if instead the OP is asking a sort of `hasEventListener`; then it's a misinterpretation and my answer doesn't apply. – ZER0 Mar 19 '15 at 12:06
Interesting that MSDN should say it's random; it isn't. Even IE6 *reliably* called the handlers in order (just the opposite order of addEventListener). I guess they didn't want to guarantee it, so they could change it... – T.J. Crowder Mar 19 '15 at 12:12

How to check if event is applied on an element with javascript?

2 Answers2