By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,743 Members | 1,266 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,743 IT Pros & Developers. It's quick & easy.

javascript syntax question

P: n/a
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?
var event = {

add: function(obj, etype, fp) {
obj.attachEvent("on" + etype, fp);
},

remove: function(obj, etype, fp) {
obj.detachEvent("on" + etype, fp);
},

DOMit: function(e) {
e = 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; }

return e;
}

}

Jul 10 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a

Your take isn't totally correct per se, but is quite close, the 'var event' makes a 'classed
object' with custom properties/children, in this case, its 3 children are 3 functions, and yes,
is add, remove and DOMit, which is used globally it seems, to add/remove event listeners to any
node.

Danny
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?
var event = {

add: function(obj, etype, fp) {
obj.attachEvent("on" + etype, fp);
},

remove: function(obj, etype, fp) {
obj.detachEvent("on" + etype, fp);
},

DOMit: function(e) {
e = 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; }

return e;
}

}
Jul 10 '06 #2

P: n/a
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

Jul 10 '06 #3

P: n/a
Danny wrote:
Your take isn't totally correct per se, but is quite close,
Please don't top-post - whose take, on what?

Fixed below...
pw********@gmail.com wrote:
var event = {

add: function(obj, etype, fp) {
obj.attachEvent("on" + etype, fp);
},
The object created by the above snippet is a plain JavaScript native
Object - it has none of the attributes that make an Array an Array.
The only thing they have in common is that they are both JavaScript
Objects.

the 'var event' makes a 'classed object'
It's just a plain Object, JavaScript doesn't have classes.

with custom properties/children,
They are properties, the term 'children' is usually applied to DOM
objects that implement the Node iterface and therefore may have
childNodes. They are very different to built-in JavaScript Objects.

<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247>

in this case, its 3 children are 3 functions, and yes,
is add, remove and DOMit, which is used globally it seems, to add/remove event
listeners to any node.
That might be the intention, but they don't work for a number of
reasons.

--
Rob

Jul 10 '06 #4

P: n/a
Thanks, What I wasn't familiar with was the syntax. If the below Method
A is the same as Method B than I know what's going on.

Method A:

var myEvent = {
add: function(obj, etype, fp) {
obj.attachEvent("on" + etype, fp);
},

remove: function(obj, etype, fp) {
obj.detachEvent("on" + etype, fp);
},

DOMit: function(e) {
e = 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;
}
return e;
}

Method B:

var myEvent = {};
myEvent.add = function(obj, etype, fp) {
obj.attachEvent("on" + etype, fp);
};

myEvent.remove = function(obj, etype, fp) {
obj.detachEvent("on" + etype, fp);
};

myEvent.DOMit = function(e) {
e = 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;
}
return e;
};

Jul 10 '06 #5

P: n/a
pw********@gmail.com wrote:
Thanks, What I wasn't familiar with was the syntax. If the below Method
A is the same as Method B than I know what's going on.
If it's purely a question of syntax, then yes, they are the same.
But...

Method A:

var myEvent = {
add: function(obj, etype, fp) {
obj.attachEvent("on" + etype, fp);
This is IE only, as explained in my first reply to this thread.
},

remove: function(obj, etype, fp) {
obj.detachEvent("on" + etype, fp);
As is this...
},

DOMit: function(e) {
e = 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;
It seems pointless to test for window.event. Adding a cancelBubble
property to the event object won't do any harm, so if stopPropagation
isn't supported, just do it. You also alreay have a reference to the
event, so don't bother with window.event for that either:

if (!e.stopPropagation) e.stopPropagation = function(){
e.cancelBubble = true;
}

Untested... try this area of Quirksmode:

<URL:http://www.quirksmode.org/js/events_order.html>
[...]

--
Rob

Jul 11 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.