pw********@gmail.com wrote:
I'm fairly new to javascript, my take on the below code is that it is
creating a array called event and populating it with 3 functions( add,
remove and DOMit). Is my take on this code correct?
Your code doesn't create an array. It will either create or extend the
window.event object by adding some properties.
Better comments could be provided if you provide some examples of how
you intend to use this.
var event = {
There are two event models - IE and W3C. It's covered at Quirksmode at
the link below (and on subsequent pages):
<URL:http://www.quirksmode.org/js/introevents.html>
Declaring a variable in the global scope (as you've done here) makes it
a property of the global (window) object. IE's event model has a
window.event object already - declaring 'event' here does nothing
harmful, it just adds the assigned properties to the existing object
(AFAIK).
W3C browsers probably won't have a window.event property, so an 'event'
property will be added to the window object and assigned the
properties. Any existing properties with the same names as the ones
you're adding will assume the new values your're assigning (I think
you're safe on that count for the time being).
When an event occurs on an element, W3C browsers have the event as a
property of the particular element, not a generic window.event as IE
does. Since you've only created/extended window.event, any calls to it
must use the full scope chain - e.g. window.event.add().
My suggestion is to put your event methods as properties of a totally
separate object, say pEvt, so you'll call them like: pEvt.add().
add: function(obj, etype, fp) {
obj.attachEvent("on" + etype, fp);
attachEvent is for the IE model, if you want it to work cross-browser,
fork the code for attachEvent and addEventListener (it's all covered in
the above Quirksmode reference).
add: function(obj, etype, fp) {
if (obj.attachEvent){
obj.attachEvent("on" + etype, fp);
} else if (obj.addEventListener){
obj.addEventListener(etype, fp, false);
}
},
},
remove: function(obj, etype, fp) {
obj.detachEvent("on" + etype, fp);
As above, look for removeEventListener. The Gecko DOM reference is
pretty handy too:
addEventListener:
<URL:http://developer.mozilla.org/en/docs/DOM:element.addEventListener>
removeEventListener
<URL:http://developer.mozilla.org/en/docs/DOM:element.removeEventListener>
remove: function(obj, etype, fp) {
if (obj.detachEvent){
obj.detachEvent("on" + etype, fp);
} else if (obj.removeEventListener){
obj.removeEventListener(etype, fp, false);
}
},
},
DOMit: function(e) {
e = e? e: window.event;
Or:
e = e || window.event;
e.tgt = e.srcElement? e.srcElement: e.target;
if (!e.preventDefault) e.preventDefault = function () { return
false; }
if (!e.stopPropagation) e.stopPropagation = function () { if
(window.event) window.event.cancelBubble = true; }
I can understand why you are trying to do what you are, but I don't
like the way you are using window.event. It is commonly used to
discriminate between the event models, but because you've added a
window.event object to W3C browsers, if you get the test the wrong way
around the logic will fail (it's nice to maintain commutative
relationships if you can).
e.g.
e = window.event || e;
should still work in the W3C event model, but your window.event object
stops it from being so.
return e;
}
}
You are attempting to extend the event object, but because of the
different event models in IE and W3C browsers, you're creating
potential headaches. Why not create your own object and extend that?
e.g.:
var pEvt = {};
pEvt.add = function(){...}
pEvt.remove = function(){...}
pEvt.toDOM = function(){...}
Incidentally, you might want to add some other methods, like pos that
returns the (x,y) position of the event in a cross-browser way (again,
it's covered at Quirksmode).
pEvt.pos = function(){...}
--
Rob
