My weekend here was great. Actually, it's been a really nice week here in Norway. I've played some board games over at Ian's house, yesterday someone who left Opera had a nice barbecue in the park. I was there as I bought her mountain bike, which I also used this weekend. Yesterday I went bicycling with Christian and today with Markus. Especially the way back is really cool — down hill. When your out of Oslo — takes about twenty minutes — you're directly into nature, with trees, beautiful lakes and nice biking paths. Really great.
While biking, Christian taught me some javascript. As Ian told me I basically had to know a set of specifications I choose DOM 3 Events to start with. I never did so much with the DOM before, but I have some basic knowledge about nodes, et cetera. Anyway, Friday I read halfway through the specification so I knew what it was about mostly and I asked Christian how a simple document would look like.
Really cool. What you do here is that you add an event listener to the document object and when someone clicks somewhere in the document you get the node back the person clicked on and the function you defined is called. So you get back an event of which event.target is the node the person clicked on. Or in my case, e.target. As it is just a node you can easily do e.target.style.background = "lime";, so I did.
To be fair, one would say that the demo only uses DOM2 features.
Good to hear that you are having a good time in Norway. Scandinavia is one of the regions I want to visit in the future.
This technique could be really helpful and it looks quite simple. I'm not a javascript guru, so I have to search for more information about this. Thanks.
Watch out for Internet Explorer, which (of course) doesn't support DOM2+ events. The biggest thing to be aware of is the way IE calls event handlers; they're treated as global functions, so using object methods breaks in IE (the this variable isn't set.)
I always use event.target. But since the evil IE doesn't support this, you need to do trick like this:
function hello( event )
{
// IE doesn't pass event into the parameter
if ( !event )
{
event = window.event;
}
// IE doesn't have the property "target".
// Use "srcElement" instead.
// Not 100% the same, but works in most simple cases
var target = event.target ? event.target : event.srcElement;
// Do something with the target
window.alert( target.nodeType );
}
P.S. Beware of a serious bug in Konqueror/Safari: if your event target contains text node, they return the text node instead of the element node. The following lines would be helpful:
// Give me element node, damn*t
while ( target.nodeType != 1 )
{
target = target.parentNode;
}
Also, the syntax on the style object differs between the DOM and IE - whereas the DOM says backgroundColor, IE says background-color. Or uh, the other way around, I don’t (really care to) remember ;p. It’s one of those (many, see also the abovementioned comments) nonstandard inconsistencies of IE’s DOM implementation.
Btw, is it typically Dutch to get a bike and take a tour through the environment immediately, or are the Norwegians (or rather: Osloians) also fond of bikes? ^_^
~Grauw
minghong: The || operator in JS is really useful for doing this thing (and the && to some extent):
a || b -> a if Boolean(a) == true, otherwise b a && b -> b if Boolean(a) == true, otherwise a
Using this you can write:
var target = event.target || event.srcElement;
Grauw: That is not correct, both DOM level 2 and IE uses backgroundColor as the property name on the style interface. This is defined by the CSS2Properties interface.
The only places where "background-color" is used in the DOM is when you are using getPropertyValue, getPropertyCSSValue, removeProperty, getPropertyPriority, setProperty on the CSSStyleDeclaration interface (but these are not supported by IE anyway).
Erik Arvidsson, I know this trick. I wrote that just to make it "easiler" to follow. By the way, I usually wrote var target = window.event ? window.event.srcElement : event.target;, as in some rare case the logical OR doesn't work.
but these are not supported by IE anyway
Yup, but the CSS names are used in the currentStyle object (somehow like the getComputedStyle method).
Erik: eh? Not correct?
Oh, stupid me. Never mind then. But that’s strange, how come I recall such a difference then...
~Grauw