With Element.addEventListener, you can easily wire-up several
different event handlers on the fly. This works great, but debugging
can be difficult if I don't know what exactly is reacting to an event.
Is there a way to list event listeners that have been wired-up to an
element's event?
AFAIK only if you use a wrapper object, and use only its event
listener-registering methods to add event listeners to the wrapped
target object. For example:
function _EventListener(fListener, bCapture)
{
this.listener = fListener || null;
this.capture = !!bCapture;
}
function _EventRegistry()
{
this.data = {};
}
_EventRegistry.prototype.add = function(sEvent, fListener, bCapture) {
var d = this.data;
if (typeof d[sEvent] == "undefined")
{
d[sEvent] = [];
}
d[sEvent].push(new _EventListener(fListener, bCapture));
};
_EventRegistry.prototype.get = function(sEvent) {
return this.data[sEvent];
};
function _Element(oTarget)
{
this.target = oTarget;
this.events = new _EventRegistry();
}
_Element.prototype.addEventListener =
function(sEvent, fListener, bCapture) {
// add feature test here
this.target.addEventListener(sEvent, fListener, bCapture);
this.events.add(sEvent, fListener, bCapture);
};
// add feature test here
var o = new _Element(document.getElementById("foo"));
o.addEventListener("click", function() { window.alert(42); }, false);
window.alert(o.events.get("click")[0].listener);
BTW: `Element::addEventListener' is more like it. We are talking
*interfaces* here.
HTH
PointedEars
