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’);
}
…

Sleepiness in Seattle » cross-browser

Cross-browser Event Handler Assignment