HTML事件
HTML事件
直接在HTML元素标签内添加事件,执行脚本
-
语法:
功能:
在HTML元素上绑定事件
说明:
执行脚本可以是一个函数的调用
鼠标事件
onload:页面加载时触发
onclick:鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onfocus:获取焦点时触发
onblur:失去焦点时触发
onchange:域的内容改变时发生
关于this指向
在事件触发的函数中,this是对该DOM对象的引用
编程练习 1
小伙伴们,我们学习了HTML事件,那么根据效果图,实现以下功能:当点击按钮时,按钮本身的背景颜色发生变化,一起来试一下吧!
Tips:直接在事件中写执行语句
任务
第一步:先写出按钮的html结构代码,注意给value的值设置为“点击我试试”,value的值是按钮上的文字。
第二步:给按钮添加鼠标点击事件,并通过backgroundColor属性设置当鼠标点击时要呈现的颜色。
参考代码
<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)和要设置的颜色
参考代码
<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>