Sleepiness in Seattle » javascript

Cross-browser Event Handler Assignment

Stanley Yao — Wed, 06 Jun 2007 15:17:33 +0000

Making the client side scripts work across different major browsers is not easy, especially when client debugging is not as convenient as more strongly typed programming languages. Try the following web page. It works fine on IE but on FireFox clicking the button will trigger nothing to happen.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Untitled Pagetitle>head>
<script language="Javascript">
function document.onclick() {
alert(‘doc event’);
}
function foo() {
alert(‘foo’);
}
script>
<body>
<input type="button" value="ok" onclick="foo();" />
body>
html>

The page will silently fail and none of the event handlers works. Change the document.onclick handler assignment into the following and it works on both browsers. Tools like the Error Console on FireFox is very helpful in diagnosing these type of errors.

…
document.onclick = function () {
alert(‘doc event’);
}
…

innerHTML could invalidate the event handlers of its child elements

Stanley Yao — Fri, 11 May 2007 04:48:10 +0000

In Javascript, using an element’s innerHTML property to dynamically edit its content provides much flexibility and convenience. But special care needs to be taken when using it, because it could bite you silently. Take one of my experiences as an example, it could break the event handlers of the child elements. Sample code as the following:

innerHTML

This code works well and when you click on div, "hello" will pop up. However if you uncomment the last line of the JavaScript code. The message won’t pop up any more. innerHTML manipulates the content of the element as a string instead of DOM, so it might just break the underlying "wires" that hooks up the elements and their event handlers. So watch out, when any of the events stops working as expected, look for the evil "innerHTML" first.

Mysterious JavaScript function call failure and loading optimization

Stanley Yao — Sun, 21 Jan 2007 18:57:40 +0000

Optimize Your Scripts in DHTML Using the DEFER Attribute

When, for example, a perfect JavaScript function call foo() with the correct syntax is always mysteriously ignored, watch out for the side effect of script loading optimization. The root cause turned out to be that the script that contains the foo() function is loaded like the the following with "defer":

//foo.js
function foo() {
document.write("hello");
}

Optimization never comes for free. Watch out for the side effects it may brings.