JavaScript事件处理

《JavaScript事件处理》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第四章JavaScript事件处理隋春雨Email：suichunyu1987@163.com了解事件和事件处理的基本概念掌握鼠标事件的处理方法掌握键盘事件的处理方法熟练掌握HTML事件的处理方法重点练习onsubmit事件的处理方法学会并独立完成网页基本校验本章学习任务2“事件处理”就是当对象的状态改变时，对象对应这种改变的动作，对事件进行处理的程序或函数称为“事件处理”在JavaScript中，鼠标、键盘、文档的状态改变称为事件；由鼠标、键盘、文档引发的一系列的程序动作，称为事件驱动；对发生的事件进

2、行相应处理的程序或函数，称为事件处理函数4.1什么是事件处理3鼠标事件是指鼠标状态的改变，包括鼠标在移动过程中、单击过程中、拖动过程中等所有鼠标状态改变的触发的事件常用的鼠标事件包括onclick单击事件，ondblclick双击事件，onmouseout鼠标离开事件，onmouseover鼠标移动至上方事件等4.2鼠标事件4onclick事件在鼠标单击某表单域时触发我们做两个例子以便更好的理解这个事件单击一个“欢迎按钮”，弹出提示框，显示文字“欢迎”设置一个文本框，单击旁边的按钮可以校验该文本框是否为

3、空4.2.1onclick单击事件5ondblclick事件在鼠标双击某表单域时触发双击事件是指在较短时间内，连续两次完成鼠标单击事件该事件的处理方法与单击事件相似4.2.2ondblclick双击事件6onmouseover事件在鼠标进入对象范围（移至对象上方）时触发我们做一个例子：在页面上显示一个按钮，按钮上文字为“请把鼠标移至此”，将鼠标移至上面后文字显示为“鼠标悬停在此处”4.2.3onmouseover鼠标悬停事件7onmouseout事件在鼠标离开对象时触发。onmouseout与onmou

4、seover经常事件共同使用改变对象的状态我们完善上一个例子，使得该按钮可以判断鼠标是否悬停其上4.2.4onmouseout鼠标离开事件8onmousedown和onmouseup事件是鼠标按下和放开事件onmousedown事件在用户把鼠标放在对象上按下鼠标键时触发onmouseup事件在用户把鼠标放在对象上鼠标按键按下的情况下，放开鼠标键时触发如果接收鼠标按下事件的对象与鼠标键放开时的对象不是同一个对象，那么onmouseup事件不会触发4.2.5鼠标按下和放开事件9键盘事件是指键盘状态的改变。常

5、用的键盘事件有onkeydown按键事件，onkeypress按下键事件，onkeyup放开键事件4.3键盘事件10onkeydown事件在键盘的按键被按下时触发onkeydown事件用于接收键盘的所有按键（包含功能键）被按下时的事件4.3.1onkeydown按键事件11onkeypress事件与onkeydown事件两者有先后顺序，onkeypress事件是在onkeydown事件发生之后发生的。此外，当按下键盘的任何一个键时都会触发onkeydown事件；但是onkeypress事件只在按下键盘的

6、任意字符键（A~Z0-9）时触发，按下如功能键（F1~F12），Ctrl、Shift、Alt等键时不会触发onkeypress事件4.3.2onkeypress按下键事件12onkeyup事件在键盘的按键被按下然后放开时触发下面我们做一个例子来更好的体会一下这三个键盘事件，尤其是体会一下onkeydown和onkeypress事件的区别数字校验的onkeyup事件4.3.4onkeyup放开键事件13HTML事件是指HTML文件状态改变时触发的、用户可以捕获的事件HTML事件主要包括onload窗口加载

7、事件，onunload窗口离开事件，onresize改变窗口大小事件，onsubmit按下提交按钮事件等4.4HTML事件14onload事件并不是在窗口加载过程中执行，而是在页面包括页面中的图片、插件、控件等内容全部下载完成后执行onload事件一般在标签中添加，onload事件多用于在页面加载完毕后，用户进行操作之前进行一些内部处理，如光标定位、页面显示效果更改、读取用户cookie信息等4.4.1onload窗口加载事件15onunload事件在窗口离开时触发，窗口的离开行为包括关闭浏

8、览器窗口、通过地址栏或收藏栏前往其他页面、单击返回、前进、刷新、主页等按钮onunload多用于或标记中4.4.2onunload窗口离开事件16onsubmit事件在一个表单被提交时触发，onsubmit事件只在表单元素中存在，多用于在提交表单时对输入数据进行有效性校验onsubmit事件的处理函数中必须有returntrue或returnfalse，否则onsubmit事件处理函数的函数体也会被忽略4.4