Javascript 事件注册机制

http://www.360doc.com/content/06/0810/09/10273_177814.shtml

?

?

事件使得客户端的 JavaScript 有机会被激活，并得以运行。在一个 Web 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来，简单的事件被实现为 JavaScript 的一部分；但是大多数最近出现的浏览器都实现了强壮的事件模型，使脚本可以更加智能地处理事件。现在的问题在于：为了支持各种浏览器，您必须和多个先进的事件模型做斗争，准确地说，是三个。

如果您正在用遵循 W3 的浏览器阅读本文，则请尝试这个修改过的版本，看看鼠标滚动时的风格变化。

这个页面使用了嵌入到事件实例中的最新版本的 toggleHighlight() 函数，展示了如何使用 JavaScript 为那些能够显示期望效果的浏览器增加额外的价值，同时也可以那些基本的内容提供给仍然使用着较老版本或者不支持脚本编程的浏览器的用户，只不过在模式上不那么动人和便于交互。

一个事件处理函数的模板

并不是每个事件处理函数都处理页面元素对象中同样的属性或者行为，但是，从上文的讨论可以派生出来的一个模板，您可以在这个模板的帮助下开始编码。模板如下：

function functionName(evt) {    evt = (evt) ? evt : ((window.event) ? window.event : "")    if (evt) {        var elem        if (evt.target) {            elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target        } else {            elem = evt.srcElement        }        if (elem) {            // process event here        }    }}

请 把第一行的函数名替换为您希望的函数名，并在注视指示的地方开始书写具体事件的代码。这个格式应该可以为您提供一个起点，适合于您采用的任何跨浏览器的事 件绑定风格。如果您需要在一个页面中多次使用这个格式，则可以进一步精简代码，即把读取目标的代码抽象成一个可重用的工具函数，然后在每一个事件处理函数 中进行调用：

// shared functionfunction getTargetElement(evt) {    var elem    if (evt.target) {        elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target    } else {        elem = evt.srcElement    }    return elem}function functionName(evt) {    evt = (evt) ? evt : ((window.event) ? window.event : "")    if (evt) {        var elem = getTargetElement(evt)        if (elem) {            // process event here        }    }}

有了这类框架，您现在应该可以把更多的注意力集中在各个事件处理函数要求的具体动作中了。