事件类型(onload)
选择练习 1
DOM中的哪个事件会在网页中的所有元素(文本、图像、CSS样式等)加载完后才触发执行？(选择一项)
A onloadB onclickC onmouseoverD onblur
正确答案：A
参考解析：
该题考察的是DOM的onload事件，正确选项为A；onload事件是在网页中的元素(图片、外部关联文件等)都完全加载到浏览器之后才执行。
B：onclick是在点击的时候触发。
C：onmouseover 事件会在鼠标指针移动到指定的元素上时发生。
D：onblur事件是失去焦点时触发。
选择练习 2
观察下面的代码，选项中说法正确的是？(选择两项)
<html><head lang="en"><meta charset="UTF-8"><title>onloadtitle><script type="text/javascript"> var btn=document.getElementById("btn"); btn.onclick=function(){ alert("hello"); }script>head><body> <input type="button" value="按钮" id="btn" />body>html>A 页面打开时会弹出“helloB 点击按钮，会弹出“hello”C 系统报错，设置的onclick事件为空D 页面要顺利执行脚本弹出“hello”，需加上onload事件
正确答案：C,D
参考解析：
该题考察的是DOM的onload事件，正确选项为CD；
onload事件是在网页中的元素(图片、外部关联文件等)都完全加载到浏览器之后才执行。题干代码中，当浏览器读到脚本时，body中的元素还未解析，所以找不到对应的DOM元素，所以系统会报错，需要给他加上onload事件即可。
事件类型(onfocus和onblur)
onfocus事件用于：
input标签type为text、password
textarea标签
选择练习 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)如果值不为空，输入框后的提示文字消失，之前加上的样式也要去掉
参考代码
<html><head><meta charset="UTF-8"><title>onblur和onfocustitle><style type="text/css"> .red{ border:1px solid red; }style>head><body> 姓名：<input type="text"><span>span><script type="text/javascript"> var input=document.getElementsByTagName("input")[0]; var span=document.getElementsByTagName("span")[0]; input.onfocus=function(){ span.innerHTML=" 请输入您的姓名"; } input.onblur=function(){ if(this.value==""){ this.className="red"; span.innerHTML=" 用户名不能为空"; } else{ this.removeAttribute("class"); span.innerHTML=""; } }script>body>html>
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
