事件的绑定（一）

爱被打了一巴掌 2023-07-17 15:56 16阅读 0赞

# HTML事件 #

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

## HTML事件 ##

直接在HTML元素标签内添加事件，执行脚本

*  语法：
    
    <tag 事件="执行脚本"></tag>
    
    功能：
    
    在HTML元素上绑定事件
    
    说明：
    
    执行脚本可以是一个函数的调用

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

## 鼠标事件 ##

*  onload：页面加载时触发
 *  onclick：鼠标点击时触发
 *  onmouseover：鼠标滑过时触发
 *  onmouseout：鼠标离开时触发
 *  onfocus：获取焦点时触发
 *  onblur：失去焦点时触发
 *  onchange：域的内容改变时发生

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

## 关于this指向 ##

在事件触发的函数中，this是对该DOM对象的引用

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

### 编程练习 1 ###

小伙伴们，我们学习了HTML事件，那么根据效果图，实现以下功能：当点击按钮时，按钮本身的背景颜色发生变化，一起来试一下吧！

Tips：直接在事件中写执行语句

![在这里插入图片描述][20200323104845621.png]

#### 任务 ####

第一步：先写出按钮的html结构代码，注意给value的值设置为“点击我试试”，value的值是按钮上的文字。

第二步：给按钮添加鼠标点击事件，并通过backgroundColor属性设置当鼠标点击时要呈现的颜色。

#### 参考代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>HTML事件</title>
    	</head>
    	<body>
    		<input type="button" value="点击我试试" onclick="this.style.backgroundColor='green'" />
    	</body>
    </html>

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

### 编程练习 2 ###

小伙伴们，今天我们学习了HTML事件，实现以下功能：

（1） 有两个按钮，分别是开始和结束  
（2） 当鼠标滑动在按钮上时，调用函数，字体颜色发生变化  
（3） 当鼠标离开按钮时，调用函数，字体颜色发生变化

#### 任务 ####

第一步：先写出两个按钮的html代码，按钮的value值分别是“开始”和“结束”

第二步：写出鼠标滑过按钮与鼠标离开按钮时调用的函数， 有两个参数，分别是当前按钮对象和颜色；因为滑过与离开实现的效果是一样的，可以使用同一个函数，传递不同的参数即可

第三步：在按钮标签里写出鼠标滑过和离开事件，分别调用这个函数。注意，调用函数的实参分别是当前的按钮（this）和要设置的颜色

#### 参考代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>HTML事件</title>
    	</head>
    	<body>
    		<input type="button" value="开始" onmouseover="Fn(this,'purple')" onmouseout="Fn(this,'gray')" />
    		<input type="button" value="结束" onmouseover="Fn(this,'yellow')" onmouseout="Fn(this,'gray')" />
    		<script> function Fn(f,c){ f.style.color=c; } </script>
    	</body>
    </html>

[20200323104845621.png]: /images/20230528/fe8d5f7dec204b8db2d7dca8d2b6fb3a.png