In which object events are stored

Question

I have a div with two function attached, one is click and other one is hover function. In javascript is there any way to find which events attached with that element. If we attach function to some element then where it store in dom. can we find it by using developer tool

Edit: How the browser / DOM knows that which event is register with which element

<div id="test">test</div>

script

document.getElementById('test').addEventListener('click',function(){},false)

document.getElementById('test').addEventListener('hover',function(){},false)

_can we find it by using developer tool_ Yes, you can. – emerson.marini Jan 09 '15 at 09:14 — emerson.marini, Jan 09 '15 at 09:14
are you using firefox or chrome dev tools? – atmd Jan 09 '15 at 09:14 — atmd, Jan 09 '15 at 09:14
In which object events are stored – Jitender Jan 09 '15 at 09:19 — Jitender, Jan 09 '15 at 09:19

KooiInc · Answer 1 · 2015-01-09T09:47:12.390

The event properties and methods are sent automatically to the handler when the event occurs. So you can use the event as parameter of the handler. The type property of the event informs you about the event type.

document.getElementById('test')
 .addEventListener('click', function(evt){ /* evt is the event object */},false);

To determine if an element can use the event, query if the property (e.g. onmouseover). If it returns undefined, the event is non existent on that element.

The snippet shows both. type is printed in red.

document.querySelector('#test').addEventListener('click', testfn);
var res = document.querySelector('#result');
var canhover = document.querySelector('#test')['onhover'];
var canclick = document.querySelector('#test')['onclick'];
var canmousover = document.querySelector('#test')['onmouseover']

res.innerHTML = 'can hover be used with #test? '+ 
                 (canhover === undefined ? 'no' : 'yes');
res.innerHTML += '<br>can click be used with #test? '+ 
                 (canclick === undefined ? 'no' : 'yes');
res.innerHTML += '<br>can mouseover be used with #test? '+ 
                 (canmousover === undefined ? 'no' : 'yes');


function testfn(evt) {
  // browser compat
  evt = evt || window.evt;
  res.innerHTML = 'Event props (event was: <i>' + evt.type + '</i>)<hr>';
  for (var l in evt) {
    if (/type/i.test(l)) {
        res.innerHTML += '<b style="color:red">' + l +': '+evt[l]+'</b><br>';
    } else {
      res.innerHTML += l +': '+evt[l]+'<br>';
    }
  }
}

#test {
  cursor:pointer;
  color: green;
  margin-bottom: 1.5em;
}

<div id="test">click me</div>
<div id="result"></div>

score 1 · Answer 2 · answered Jan 09 '15 at 09:17

1

You could use the jQuery Eventfilter and test for the result:

http://www.codenothing.com/archives/jquery/event-filter/

Also I found this jQuery plugin on GitHub: https://github.com/sebastien-p/jquery.hasEventListener

answered Jan 09 '15 at 09:17

Daniel Müller

426
1
5
19

In which object events are stored

2 Answers2