DOM 0级事件
DOM 0级事件
- 通过DOM获取HTML元素
- (获取HTML元素).事件=执行脚本
- 语法：
- ele.事件=执行脚本
- 功能：
- 在DOM对象上绑定事件
- 说明：
- 执行脚本可以是一个匿名函数，也可以是一个函数的调用
不建议使用HTML事件的原因
- 多元素绑定相同的事件时，效率低
- 不建议在HTML元素中写JavaScript代码
选择练习
关于DOM0级事件，下列选项中说法正确的是？（选择两项）
A 直接在html元素上绑定事件
B 通过DOM获取HTML元素，在DOM对象上绑定事件
C 执行脚本是一个匿名函数，也可以是一个函数的调用
D 如果调用函数，那么语法是：ele.事件=函数名();
正确答案： B,C
参考解析：
该题考察的是DOM的0级事件，正确选项为BC；
DOM的0级事件通过DOM获取到html元素，语法是：ele.事件=执行脚本；执行脚本可以是一个匿名函数，也可以直接调用函数，如果调用函数，语法是：ele.事件=函数名，不加括号
编程练习 1
实现以下功能：
（1）如果按钮的值是“全选”， 当点击按钮时，按钮的值变为“反选”
（2）如果按钮的值是“反选”， 当点击按钮时，按钮的值变为“全选”
注意：
使用通过DOM获取HTML元素的方式绑定事件。
参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和反选</title>
</head>
<body>
<input type="button" value="全选" />
<script>
btn=document.getElementsByTagName("input")[0];
function fun(){
if(this.value=="全选"){
this.setAttribute("value","反选");
} else{
this.setAttribute("value","全选");
}
}
btn.onclick=fun;
</script>
</body>
</html>
编程练习 2
实现以下功能：
（1）当点击“录入”按钮时，循环弹出“请输入员工姓名”的输入框，每次录入一个员工的姓名。
（2）直到用户输入-1时，才停止弹出输入框，然后将用户输入的信息输出在页面上。
参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>信息录入</title>
</head>
<body>
<input type="button" value="录入" />
<script type="text/javascript">
var inputs=document.getElementsByTagName("input");
var entry=inputs[0];
entry.onclick=entryFn;
function entryFn(){
var arr=[];
var input
while(input!="-1"){
input=prompt("请输入员工姓名");
arr.push(input);
}
arr.pop();
for(var i=0;i<arr.length;i++){
document.write("录入的第"+(i+1)+"个员工信息是："+arr[i]+"<br/ >");
}
}
</script>
</body>
</html>
