浏览器的事件处理

最近对浏览器的事件处理感兴趣了：

<script type="text/javascript"> function pressEnter() { var e = window.event; alert(e.keyCode); } </script> firstName:<input name="firstName" type="text" onkeydown="pressEnter()"/><br/> lastName:<input name="lastName" type="text" onkeydown="pressEnter()"/><br/>

这样当用户在文本输入框中按下键盘时，显示出键盘的键码值。

然而上面的代码在firefox下却不能运行，原因是在IE中,事件对象是作为一个全局变量event来保存和维护的。所以在代码中，只要轻松调用window.event就可以轻松获取事件对象，再event.srcElement就可以取得触发事件的元素进行进一步处理。在FireFox中，事件对象却不是全局对象，一般情况下，是现场发生，现场使用，FireFox把事件对象自动传给事件处理程序。

<script type="text/javascript"> function pressEnter() { var e = arguments[0]; //在最新版的firefox3.5.6下，取键值码有两种方式e.keyCode和e.which //如果用e.charCode是取不到值的 //我还里就写成e.which了 alert(e.which); } </script> firstName:<input name="firstName" type="text" onkeydown="pressEnter(event)"/><br/> lastName:<input name="lastName" type="text" onkeydown="pressEnter(event)"/><br/>

如果文本框太多的话，也可以在加载时注册事件：

<script type="text/javascript"> function pressEnter() { var e = arguments[0]; alert(e.which); } window.onload = function() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++) { inputs[i].onkeydown = pressEnter; } } </script> firstName:<input name="firstName" type="text" /><br/> lastName:<input name="lastName" type="text" /><br/>

为什么上面那种情况需要传参数，而这里不需要呢？原因在于在于事件绑定的方式：如果在input中用onclick=""绑定后就会直接执行，

如果没有为函数传递参数，firefox再也没有机会为pressEnter函数传递参数了；如果在javascript代码中用onclick=pressEnter;绑定的话，因为不是直接执行函数，所以firefox有机会为其传递参数。

结合以上的内容，要写一个兼容性好的代码也变得轻松了许多：

<script type="text/javascript"> function pressEnter() { var e = window.event || arguments[0]; var keyCode = e.keyCode || e.which; alert(keyCode); } window.onload = function() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++) { inputs[i].onkeydown = pressEnter; } } </script> firstName:<input name="firstName" type="text" /><br/> lastName:<input name="lastName" type="text" /><br/>