JavaScript中的事件处理

时间：2021-05-26

事件处理概述
　　事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件-启动事件处理程序-事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意JavaScript语句，但是我们一般用特定的自定义函数（function）来处理事情。
指定事件处理程序有三种方法：
方法一直接在HTML标记中指定。这种方法是用得最普遍的。方法是：
<标记......事件="事件处理程序"[事件="事件处理程序"...]>

让我们来看看例子：
<body...onload="alert('网页读取完成，请慢慢欣赏！')"onunload="alert('再见！')">

这样的定义<body>标记，能使文档读取完毕的时候弹出一个对话框，写着“网页读取完成，请慢慢欣赏”；在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候弹出“再见”。
方法二编写特定对象特定事件的JavaScript。这种方法用得比较少，但是在某些场合还是很好用的。方法是：
<scriptlanguage="JavaScript"for="对象"event="事件">
...
(事件处理程序代码)
...
</script>

<scriptlanguage="JavaScript"for="window"event="onload">
alert('网页读取完成，请慢慢欣赏！');
</script>

方法三在JavaScript中说明。方法：
<事件主角-对象>.<事件>=<事件处理程序>;

用这种方法要注意的是，“事件处理程序”是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”。
functionignoreError(){
returntrue;
}
window.onerror=ignoreError;//没有使用“()”

这个例子将ignoreError()函数定义为window对象的onerror事件的处理程序。它的效果是忽略该window对象下任何错误（由引用不允许访问的location对象产生的“没有权限”错误是不能忽略的）。

事件详解



onblur事件发生在窗口失去焦点的时候。应用于：window对象

onchange事件发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。应用于：Password对象；Select对象；Text对象；Textarea对象

onclick事件发生在对象被单击的时候。单击是指鼠标停留在对象上，按下鼠标键，没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象（Button）通常会有onclick事件处理程序，因为这种对象根本不能从用户那里得到任何信息，没有onclick事件处理程序就等于废柴。按钮上添加onclick事件处理程序，可以模拟“另一个提交按钮”，方法是：在事件处理程序中更改表单的action,target,encoding,method等一个或几个属性，然后调用表单的submit()方法。在Link对象的onclick事件处理程序中返回false值（returnfalse），能阻止浏览器打开此连接。即，如果有一个这样的连接：<ahref="http://网站，除非用户禁止浏览器运行JavaScript。应用于：Button对象；Checkbox对象；Image对象；Link对象；Radio对象；Reset对象；Submit对象

onerror事件发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(ErrorHandler)，用来处理错误。上边已经介绍过，要忽略一切错误，就使用：
functionignoreError(){
returntrue;
}
window.onerror=ignoreError;

应用于：window对象

onfocus事件发生在窗口得到焦点的时候。应用于：window对象

onload事件发生在文档全部下载完毕的时候。全部下载完毕意味着不但HTML文件，而且包含的图片，插件，控件，小程序等全部内容都下载完毕。本事件是window的事件，但是在HTML中指定事件处理程序的时候，我们是把它写在<body>标记中的。应用于：window对象

onmousedown事件发生在用户把鼠标放在对象上按下鼠标键的时候。参考onmouseup事件。应用于：Button对象；Link对象

onmouseout事件发生在鼠标离开对象的时候。参考onmouseover事件。应用于：Link对象

onmouseover事件发生在鼠标进入对象范围的时候。这个事件和onmouseout事件，再加上图片的预读，就可以做到当鼠标移到图像连接上，图像更改的效果了。有时我们看到，在指向一个连接时，状态栏上不显示地址，而显示其它的资料，看起来这些资料是可以随时更改的。它们是这样做出来的：
<ahref="..."onmouseover="window.status='ClickMePlease!';returntrue;"onmouseout="window.status='';returntrue;">

应用于：Link对象

onmouseup事件发生在用户把鼠标放在对象上鼠标键被按下的情况下，放开鼠标键的时候。如果按下鼠标键的时候，鼠标并不在放开鼠标的对象上，则本事件不会发生。应用于：Button对象；Link对象

onreset事件发生在表单的“重置”按钮被单击（按下并放开）的时候。通过在事件处理程序中返回false值（returnfalse）可以阻止表单重置。应用于：Form对象

onresize事件发生在窗口被调整大小的时候。应用于：window对象

onsubmit事件发生在表单的“提交”按钮被单击（按下并放开）的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回false值（returnfalse）可以阻止表单提交。应用于：Form对象

onunload事件发生在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候。与onload一样，要写在HTML中就写到<body>标记里。　　有的WebMasters用这个方法来弹出“调查表单”，以“强迫”来者填写；有的就弹出广告窗口，唆使来者点击连接。我觉得这种“onunload="open..."”的方法很不好，有时甚至会因为弹出太多窗口而导致资源缺乏。有什么对来者说就应该在网页上说完，不对吗？　应用于：window对象

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章