can I get a list of event listeners on an element?

201 views
Skip to first unread message

Kevin Porter

unread,
Aug 25, 2009, 5:45:14 PM8/25/09
to prototype-s...@googlegroups.com

Hi,

Can I get a list of registered listeners/observers on an element?

What I'm trying to do is dynamically replace an element with another
element, but want to preserve the events.

I don't want to resort to something like:

new_element.onclick = old_element.onclick;

as the prototype docs advise against using .onclick, .onmouseover etc.

If prototype doesn't provide a way to do this, is there a bare JS way to
do it (ie to get a list of events that were registered with
addEventListener)? I googled but couldn't find this.


regards,

- Kev

--
Kevin Porter
Advanced Web Construction Ltd
http://webutils.co.uk
http://billiardsearch.net
http://9ballpool.co.uk

AJAX Blackjack - real-time multi-player blackjack game with no flash, java or software downloads required - http://blackjack.webutils.co.uk


Rick Waldron

unread,
Aug 25, 2009, 9:58:32 PM8/25/09
to prototype-s...@googlegroups.com
This question has been asked... but I've never seen a solid answer... maybe I just missed them. But if you're using version 1.6.1_rc3 (or any version with Element#getStorage() )



                var _storage    = $('element').getStorage();
                console.log( _storage._object.prototype_event_registry._object );



(assumes you have firebug (or anything that supports a console.log() ) running.)

T.J. Crowder

unread,
Aug 26, 2009, 4:04:51 AM8/26/09
to Prototype & script.aculo.us
Hi,

Prototype doesn't have an official API call that gives you the event
handlers for an element. If you look at the source, it's fairly easy
to get them (in particular the stopObserving source is helpful), but
in a way that's undocumented and subject to change. (It changed quite
a bit between 1.6.0 and 1.6.1, for instance.)

It may well not be appropriate to move an event handler from one
element to another. Consider this:

function foo(container) {
container.down('.flargle').observe('change', function(event) {
if (this.value.length == 0) {
container.addClassName('error');
} else {
container.removeClassName('error');
}
});
}

If you clone the container, including its flargle element, the handler
will not function as expected -- it'll update the original container,
not the new one. Now, I'm not saying that's a smart way to implement
that function, but I suspect there's a more realistic version of this
scenario (a corrolation between the observed element and some data
bound to the handler function in some way, in this case via a closure)
that I just didn't come up with on first thought.

Now, if you're in control of the code and know things like that aren't
being done, you could safely transfer the event handlers to cloned
elements. But I wonder if refactoring (perhaps refactoring involving
event delegation) could obviate the need for doing this...

FWIW,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available


On Aug 25, 10:45 pm, Kevin Porter <k...@9ballpool.co.uk> wrote:
> Hi,
>
> Can I get a list of registered listeners/observers on an element?
>
> What I'm trying to do is dynamically replace an element with another
> element, but want to preserve the events.
>
> I don't want to resort to something like:
>
> new_element.onclick = old_element.onclick;
>
> as the prototype docs advise against using .onclick, .onmouseover etc.
>
> If prototype doesn't provide a way to do this, is there a bare JS way to
> do it (ie to get a list of events that were registered with
> addEventListener)? I googled but couldn't find this.
>
> regards,
>
> - Kev
>
> --
> Kevin Porter
> Advanced Web Construction Ltdhttp://webutils.co.ukhttp://billiardsearch.nethttp://9ballpool.co.uk

david

unread,
Aug 26, 2009, 8:25:39 AM8/26/09
to Prototype & script.aculo.us
Hi Kevin,

read this small post by kangax, that cereate a bookmartlet to count
numbers of event an application is using, but by modifing this, you
should be able to see what events are used in an element.

go to http://thinkweb2.com/projects/prototype/event-delegation-will-save-the-world/

--
david
Reply all
Reply to author
Forward
0 new messages