事件的绑定（二）

雨点打透心脏的1/2处 2023-07-18 02:19 14阅读 0赞

# DOM 0级事件 #

--------------------

## DOM 0级事件 ##

1.  通过DOM获取HTML元素
2.  (获取HTML元素).事件=执行脚本

*  语法：
    
    ele.事件=执行脚本
    
    功能：
    
    在DOM对象上绑定事件
    
    说明：
    
    执行脚本可以是一个匿名函数，也可以是一个函数的调用

--------------------

## 不建议使用HTML事件的原因 ##

1.  多元素绑定相同的事件时，效率低
2.  不建议在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>