ExpatTech Techblog - Javascript

Another beautiful evening I spent with IE.

Normally I use addEventListener/attachEvent (congratulations again, IE) to handle events, and normally I love it, and feel this is the way things should work. One day I ran into a problem, when in the event handler I needed a reference to the object I defined the event on. Consider this:

<div class="sokilyenvan" id="joskabacsi">
<img alt="" src="blah.gif" />
nyehehe
<span id="pistabacsi">gihi</span>
</div>

So, I attach an 'onclick' event to all the elements which are of the class 'sokilyenvan'. In the event handler, I need to know which specific one was clicked (for example 'joskabacsi').

In newer browsers, when you start dragging an image, a default behaviour is triggered, so you can drag the image ex. to the desktop or whereever you want. Firefox, Opera, and Chrome does this, and also Internet Explorer 8. As anyone could guess, problems start with the latter.

I wanted to create a solution where the user can drag and drop objects around, and of course in this case it is not allright when the browser overrides my event handlers with its default one.

In standards-compliant browsers the solution is easy, the Event object has a method called preventDefault(), and when you call it in the 'onmousedown' event handler, this default behaviour is cancelled. I was not really surprised when it was only IE8 where it did not work. Well, in IE the Event object has no preventDefault() method, IE uses a boolean property called returnValue. I tried that one, nothing changed.

I spent some time googling about this, no results. Then in MSDN I found out that IE has a special event, called 'ondragstart' , and I already knew that this is the solution (Safari seems to support this event too). So in an 'ondragstart' event handler you have to set returnValue to false, and you are done.

If you want to catch ex. every mouseclick on the whole page, you should attach the event to document.body. This will work with both Firefox (addEventListener) and IE (attachEvent).

If you want to attach the onload event globally (fires when the page is loaded), you can attach it to window.

Sometimes very useful to change the properties of a website element when an event occurs. The key is the style member of the object.

function ChangeSomething()
{
    var obj = document.getElementById('valami');
    obj.style.backgroundColor = "#f0f0f0";
    obj.readOnly = true;
}

And here's the a list of Javascript equvivalent of the css properties: http://codepunk.hardwar.org.uk/css2js.htm

A lot of times you might run into using this bloody Javascript function. For example when you are replacing target="_blank"-s for the sake of XHTML Strict valid markup (like in Varga Bence's solution - Hungarian). Not like on this blog site, which is HTML 4 Transitional.

Here is the way it is to be used.

window.open(URL, WindowName[, WindowFeatures]);

Not much to say about URL (well, it is a string and it can be blank). You can use WindowName (string) to refer to the window later, also if you call window.open with the same WindowName several times, it will open a new window only for the first time and use the same window for the other calls.