JavaScript中的事件处理角色详解！
2009-04-03 20:09
232 查看
JavaScript中的事件处理角色详解！
事件处理的简要概述
事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件 - 启动事件处理程序 -事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句，但是我们一般用特定的自定义函数（function）来处理事情。
指定事件处理程序有三种方法：
方法一：
直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是：
<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>
让我们来看看比较形象点的例子吧：
<body ...font-size: 12pt; font-family: 宋体;">网页正在加载……请稍后')">
这样的定义<body>标记，能使文档读取的时候弹出一个对话框，写着“网页正在加载……请稍后”；在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候弹出“再见！欢迎下次光临本站点！”。
方法二：
编写特定对象特定事件的 JavaScript。这种方法用得比较少，但是在某些场合还是很好用的。方法是：
<script type="text/JavaScript" for="对象" event="事件">
...
(事件处理程序代码)
...
</script>
<script type="text/JavaScript" for="window" event="onload">
alert('网页正在加载……请稍后');
</script>
方法三：
在 JavaScript
中说明。方法：
<事件主角 - 对象>.<事件> = <事件处理程序>;
用这种方法要注意的是，“事件处理程序”是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”。
function someError() {
return true;
}
window.onerror = someError; // 没有使用“()”
这个例子将
someError() 函数定义为 window 对象的 onerror 事件的处理程序。它的效果是忽略该 window 对象下任何错误（由引用不允许访问的 location 对象产生的“没有权限”错误是不能忽略的）。
事件详解
·onblur 事件
发生在窗口失去焦点的时候。应用于：window 对象。当我们在进行表单验证或者填写信息时时很有用的哦！
·onchange 事件
发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。应用于：Password 对象；Select 对象；Text 对象；Textarea 对象。这个事件呢，比较多的用于对信息的修改或者信息提示(字数检索等)等！
·onclick 事件
发生在对象被单击的时候。单击是指鼠标停留在对象上，按下鼠标键，没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象（Button）通常会有 onclick 事件处理程序，因为这种对象根本不能从用户那里得到任何信息，没有 onclick 事件处理程序就等于废柴。按钮上添加 onclick 事件处理程序，可以模拟“另一个提交按钮”，方法是：在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性，然后调用表单的 submit() 方法。在 Link 对象的 onclick 事件处理程序中返回 false 值（return false），能阻止浏览器打开此连接。即，如果有一个这样的连接：<a href="http://vku88.5d6d.com">Go!</a>，那么无论用户怎样点击，都不会去到 http://vku88.5d6d.com网站，除非用户禁止浏览器运行 JavaScript。应用于：Button 对象；Checkbox 对象；Image 对象；Link 对象；Radio 对象；Reset 对象；Submit 对象。onclick事件对象那应用的就数不胜数了！我们用的最多的就是它了！
·onerror 事件
发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler)，用来处理错误。上边已经介绍过，要忽略一切错误，就使用：
function someError() {
return true;
}
window.onerror = someError;
应用于：window [b]对象。它可以对一些错误的对象进行处理，比如图片加载失败，文字显示失败，或者数据提交等等都是很有潜力的！[/b]
·onload 事件
发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件，而且包含的图片，插件，控件，小程序等全部内容都下载完毕。本事件是 window 的事件，但是在 HTML 中指定事件处理程序的时候，我们是把它写在<body>标记中的。应用于：window 对象
·onfocus 事件
发生在窗口得到焦点的时候。应用于：window 对象。它的发生于onblur相类似！不过它是得到焦点时发生的！它可以为我们的用户交互式体验提供很人性化的效果！很多Ajax程序和它和有缘哦！
·onmousedown 事件
发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。应用于：Button 对象；Link 对象。它与onclick一样很受欢迎！
·onmouseout 事件
发生在鼠标离开对象的时候。参考 onmouseover 事件。应用于：Link 对象。
·onmouseover 事件
发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件，再加上图片的预读，就可以做到当鼠标移到图像连接上，图像更改的效果了。有时我们看到，在指向一个连接时，状态栏上不显示地址，而显示其它的资料，看起来这些资料是可以随时更改的。它们是这样做出来的：
<a href="...."></a>
应用于：Link 对象
·onmouseup 事件
发生在用户把鼠标放在对象上鼠标键被按下的情况下，放开鼠标键的时候。如果按下鼠标键的时候，鼠标并不在放开鼠标的对象上，则本事件不会发生。应用于：Button 对象；Link 对象。此对象一般多用于拖拽等事件需求上！
·onreset 事件
发生在表单的“重置”按钮被单击（按下并放开）的时候。通过在事件处理程序中返回 false 值（return false）可以阻止表单重置。应用于：Form 对象
·onresize 事件
发生在窗口被调整大小的时候。不过本人一般很少用到这个事件类型！不过还是了解下比较好！应用于：windows对象
·onsubmit 事件
发生在表单的“提交”按钮被单击（按下并放开）的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值（return false）可以阻止表单提交。应用于：Form 对象
·onunload 事件
发生在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候。与 onload 一样，要写在 HTML 中就写到<body>标记里。 有的 Web Masters 用这个方法来弹出“通知”，以“强迫”来者阅读；有的就弹出广告窗口，唆使来者点击连接。我觉得这种“onunload="open..."”的方法很不好，有时甚至会因为弹出太多窗口而导致资源缺乏。如果真要用弹出窗口的话我觉得还是用层来实现比较好！这在用户交互式体验上也相对来说比较好！
事件处理的简要概述
事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件 - 启动事件处理程序 -事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句，但是我们一般用特定的自定义函数（function）来处理事情。
指定事件处理程序有三种方法：
方法一：
直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是：
<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>
让我们来看看比较形象点的例子吧：
<body ...font-size: 12pt; font-family: 宋体;">网页正在加载……请稍后')">
这样的定义<body>标记，能使文档读取的时候弹出一个对话框，写着“网页正在加载……请稍后”；在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候弹出“再见！欢迎下次光临本站点！”。
方法二：
编写特定对象特定事件的 JavaScript。这种方法用得比较少，但是在某些场合还是很好用的。方法是：
<script type="text/JavaScript" for="对象" event="事件">
...
(事件处理程序代码)
...
</script>
<script type="text/JavaScript" for="window" event="onload">
alert('网页正在加载……请稍后');
</script>
方法三：
在 JavaScript
中说明。方法：
<事件主角 - 对象>.<事件> = <事件处理程序>;
用这种方法要注意的是，“事件处理程序”是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”。
function someError() {
return true;
}
window.onerror = someError; // 没有使用“()”
这个例子将
someError() 函数定义为 window 对象的 onerror 事件的处理程序。它的效果是忽略该 window 对象下任何错误（由引用不允许访问的 location 对象产生的“没有权限”错误是不能忽略的）。
事件详解
·onblur 事件
发生在窗口失去焦点的时候。应用于：window 对象。当我们在进行表单验证或者填写信息时时很有用的哦！
·onchange 事件
发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。应用于：Password 对象；Select 对象；Text 对象；Textarea 对象。这个事件呢，比较多的用于对信息的修改或者信息提示(字数检索等)等！
·onclick 事件
发生在对象被单击的时候。单击是指鼠标停留在对象上，按下鼠标键，没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象（Button）通常会有 onclick 事件处理程序，因为这种对象根本不能从用户那里得到任何信息，没有 onclick 事件处理程序就等于废柴。按钮上添加 onclick 事件处理程序，可以模拟“另一个提交按钮”，方法是：在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性，然后调用表单的 submit() 方法。在 Link 对象的 onclick 事件处理程序中返回 false 值（return false），能阻止浏览器打开此连接。即，如果有一个这样的连接：<a href="http://vku88.5d6d.com">Go!</a>，那么无论用户怎样点击，都不会去到 http://vku88.5d6d.com网站，除非用户禁止浏览器运行 JavaScript。应用于：Button 对象；Checkbox 对象；Image 对象；Link 对象；Radio 对象；Reset 对象；Submit 对象。onclick事件对象那应用的就数不胜数了！我们用的最多的就是它了！
·onerror 事件
发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler)，用来处理错误。上边已经介绍过，要忽略一切错误，就使用：
function someError() {
return true;
}
window.onerror = someError;
应用于：window [b]对象。它可以对一些错误的对象进行处理，比如图片加载失败，文字显示失败，或者数据提交等等都是很有潜力的！[/b]
·onload 事件
发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件，而且包含的图片，插件，控件，小程序等全部内容都下载完毕。本事件是 window 的事件，但是在 HTML 中指定事件处理程序的时候，我们是把它写在<body>标记中的。应用于：window 对象
·onfocus 事件
发生在窗口得到焦点的时候。应用于：window 对象。它的发生于onblur相类似！不过它是得到焦点时发生的！它可以为我们的用户交互式体验提供很人性化的效果！很多Ajax程序和它和有缘哦！
·onmousedown 事件
发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。应用于：Button 对象；Link 对象。它与onclick一样很受欢迎！
·onmouseout 事件
发生在鼠标离开对象的时候。参考 onmouseover 事件。应用于：Link 对象。
·onmouseover 事件
发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件，再加上图片的预读，就可以做到当鼠标移到图像连接上，图像更改的效果了。有时我们看到，在指向一个连接时，状态栏上不显示地址，而显示其它的资料，看起来这些资料是可以随时更改的。它们是这样做出来的：
<a href="...."></a>
应用于：Link 对象
·onmouseup 事件
发生在用户把鼠标放在对象上鼠标键被按下的情况下，放开鼠标键的时候。如果按下鼠标键的时候，鼠标并不在放开鼠标的对象上，则本事件不会发生。应用于：Button 对象；Link 对象。此对象一般多用于拖拽等事件需求上！
·onreset 事件
发生在表单的“重置”按钮被单击（按下并放开）的时候。通过在事件处理程序中返回 false 值（return false）可以阻止表单重置。应用于：Form 对象
·onresize 事件
发生在窗口被调整大小的时候。不过本人一般很少用到这个事件类型！不过还是了解下比较好！应用于：windows对象
·onsubmit 事件
发生在表单的“提交”按钮被单击（按下并放开）的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值（return false）可以阻止表单提交。应用于：Form 对象
·onunload 事件
发生在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候。与 onload 一样，要写在 HTML 中就写到<body>标记里。 有的 Web Masters 用这个方法来弹出“通知”，以“强迫”来者阅读；有的就弹出广告窗口，唆使来者点击连接。我觉得这种“onunload="open..."”的方法很不好，有时甚至会因为弹出太多窗口而导致资源缺乏。如果真要用弹出窗口的话我觉得还是用层来实现比较好！这在用户交互式体验上也相对来说比较好！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript之事件处理详解
- 详解JavaScript中的事件处理
- JavaScript之事件处理详解
- 详解javascript跨浏览器事件处理程序
- javascript 事件处理、鼠标拖动效果实现方法详解
- javascript表单事件处理方法详解
- 详解javascript中的事件处理
- 详解JavaScript中的事件流和事件处理程序
- javascript之跨浏览器的事件处理详解
- JavaScript基础----24JS事件详解-事件处理
- 详解javascript跨浏览器事件处理程序
- javascript打造跨浏览器事件处理机制：详解
- 详解javascript中的事件处理
- JavaScript事件处理程序详解
- javascript 事件处理、鼠标拖动效果实现方法详解
- JavaScript 之事件处理详解
- javascript事件处理
- 理解JavaScript中的事件处理
- C# JavaScriptSerializer序列化时的时间处理详解
- JSF 2 简介，第 3 部分: 事件处理、JavaScript 和 Ajax