Extending Node w/ addEventListener

[PJ]

Is it possible to extend the Node object so that the DOM function
addEventListener can be used w/ IE? Does anyone have an example of this?

Thanks,
Paul

 

[Martin Honnen]

Is it possible to extend the Node object so that the DOM function
addEventListener can be used w/ IE? Does anyone have an example of this?

Neither MSXML (for the XML DOM) nor IE (for the HTML DOM) expose a Node
function or its prototype to script so if you are thinking about doing
some stuff like
Node.prototype.method = function () { ... };
then no, that is not possible with MSIE.
But some extension of the HTML DOM in IE/Win is possible using
behaviors, that way you can implement some properties or methods and
bind them to all or some elements in the page using a CSS selector:
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/howto/creating.asp>

As for addEventListener, IE 5.5/6 have attachEvent which at least allows
setting multiple event handlers for an element.

 

[Paul Walker]

i'm starting to see that now...i apologize in advance for my ignorance w/
this language....

have you found a better solution for event handling then a library such as
this?

http://www.developer-x.com/behaviour/listener.js

 

[Paul Walker]

btw...yes, my hope was something like...

if ( !window.addEventListener && window.attachEvent )
Node.prototype.addEventListener = function(element, func) {
window.attachEvent(element, func);
}


but that's still probably wrong syntax and i'd appreciate correction. thx
guys. ( should it be return window.attachEvent, ect. )

TIA and forever,
PJ

 

[VK]

btw...yes, my hope was something like...

if ( !window.addEventListener && window.attachEvent )
Node.prototype.addEventListener = function(element, func) {
window.attachEvent(element, func);
}


but that's still probably wrong syntax and i'd appreciate correction. thx
guys. ( should it be return window.attachEvent, ect. )

There are more problems than simply make a copy of a function under
another name.
1) addEventListener requires three arguments: event name, function
reference and capturing phase
attachEvent has only two arguments: event name and function
reference.
2) addEventListener wants all event names in "pure" form (w/o "on"):
"click", "load".
attachEvent wants all event names in "on" form: "onclick", "onload".

As it was explained before you cannot extend the prototype of every
single HTML element at once any way.

I'm using sometimes (when events are getting to messy) this self-made
event dispatcher. The other benefit is that it will normalise event
names so can use any form you prefer (with "on" or w/o "on"):


function EventDispatcher() {
this.getClassName = function() {return 'EventDispatcher';}
this.addListener = function(obj, evt, fun, b) {
var result = true;
var eventPhase = (typeof(b)=='boolean') ? b : false;
var eventName = normaliseEventName(evt,obj);
if ('addEventListener' in obj) {
obj.addEventListener(eventName, fun, eventPhase);
}
else if ('attachEvent' in obj) {
obj.attachEvent(eventName, fun);
}
else {
result = false;
}
return result;
}

function normaliseEventName(eName, context) {
var rightName = eName.toLowerCase();
if (('addEventListener' in context)&&
(rightName.charAt(0) == 'o')) {
rightName = rightName.substring(2);
}
else if (('attachEvent' in context)&&
(rightName.charAt(0) != 'o')) {
rightName = 'on' + rightName;
}
else {
/*NOP*/
}
return rightName;
}
}


and then later:
var Dispatcher = new EventDispatcher();
Dispatcher.addListener(obj,'onclick',foo);
// or Dispatcher.addListener(obj,'click',foo);


If you find it anyhow useful, you're welcome to extend the prototype
with
this.removeListener