大学资料-事件类型

大学资料-事件类型

事件类型（onload）

选择练习 1

DOM中的哪个事件会在网页中的所有元素（文本、图像、CSS样式等）加载完后才触发执行？（选择一项）

A onloadB onclickC onmouseoverD onblur

选择练习 2

观察下面的代码，选项中说法正确的是？（选择两项）

正确答案：C,D参考解析：该题考察的是DOM的onload事件，正确选项为CD；onload事件是在网页中的元素（图片、外部关联文件等）都完全加载到浏览器之后才执行。题干代码中，当浏览器读到脚本时，body中的元素还未解析，所以找不到对应的DOM元素，所以系统会报错，需要给他加上onload事件即可。

事件类型（onfocus和onblur）

onfocus事件用于：

input标签type为text、passwordtextarea标签

选择练习 1

关于onfocus和onblur事件下列说法正确的是？（选择两项）

A onfocus和onblur事件常用在表单元素中B onfocus事件是失去焦点时触发C onblur事件是获得焦点时触发D onfocus事件是获得焦点时触发

正确答案：A,D参考解析：该题考察的是onfocus和onblur事件，正确选项为AD；这两个事件常和表单配合使用，onfocus事件是获得焦点时触发，onblur事件是失去焦点时触发。

选择练习 2

想要判断当输入框失去焦点时的状态，使用下列哪个事件？（选择一项）

A onfocusB onblurC onclickD onmouseover

正确答案：B参考解析：该题考察的是onblur事件，正确选项为B；onblur事件是失去焦点时触发的；A：onfocus是获得焦点事件。C：onclick是单击事件。D：onmouseover是鼠标经过事件。

编程练习

小伙伴们，根据效果图，实现下列功能：

（1） 当输入框获得焦点：如果输入框值为空，提示“请输入您的姓名”

（2） 当输入框失去焦点：如果输入框值为空，提示“用户名不能为空”，并且边框颜色变为红色如果输入框值不为空，那么没有提示文字，边框颜色是默认颜色

任务

第一步：通过元素名获取dom对象的方式，得到输入框对象以及放置提示文字的元素对象，并用变量进行接收

第二步：给输入框绑定获得焦点事件，当输入框获得焦点时，判断：

如果值为空，输入框后出现提示文字“请输入您的姓名”

第三步：给输入框绑定失去焦点事件，当输入框获得焦点时，判断：

（1）如果值为空，输入框后出现提示文字“用户名不能为空”，并且将样式表中的边框样式添加给输入框

（2）如果值不为空，输入框后的提示文字消失，之前加上的样式也要去掉

参考代码

姓名：