js的event在Firefox、Chrome和IE下的一个奇怪现象

<a href="#" id="zb">abc</a>
<script type="text/javascript">
function gid(id)
{
    return document.getElementById(id);
}
function foo()
{
    var x = event.clientX;
    var y = event.clientY;
    alert("X 坐标: " + x + ", Y 坐标: " + y)
}
gid('zb').onclick = foo;
</script>
上面这段代码在IE8和Chrome下正常运行，但是到了FF下就提示event is not defined

把代码改成下面这样：

<a href="#" id="zb">abc</a>
<script type="text/javascript">
function gid(id)
{
    return document.getElementById(id);
}
function foo(event)
{
    var x = event.clientX;
    var y = event.clientY;
    alert("X 坐标: " + x + ", Y 坐标: " + y)
}
gid('zb').onclick = foo;
</script>
在Chrome和FF正常了，在IE下又提示： 'clientX' 为空或不是对象

我再把代码改成这样

<a href="#" id="zb" onclick="dp_OK(event)">abc</a>
<script type="text/javascript">
function foo(event)
{
    var x = event.clientX;
    var y = event.clientY;
    alert("X 坐标: " + x + ", Y 坐标: " + y)
}
//gid('zb').onclick = foo;
</script>

终于皆大欢喜，都正常了，但是这样写不是面向对象的写法，并且大量添加事件时不可能每个标签上都加一个onclick="XXX"，请教一下大家这个地方到底是出了什么问题呢？