举个粟子,写一个段落“鼠标悬停时把字体颜色变成红色,背景颜色变成灰色,离开时恢复”:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会变色的段落</title>
<script>
function chfgcolor(){
var e=document.getElementById("demo");
e.style.color="red";
}
function chbgcolor(){
var e=document.getElementById("demo");
e.style["background-color"]="grey";
}
function chback(){
var e=document.getElementById("demo");
e.style="color:#000000; background-color:#ffffff;"
}
</script>
</head>
<body>
<p id="demo" onmouseover="chfgcolor();chbgcolor();" onmouseout="chback();">这是一会变色的段落</p>
</body>
</html>
以下是运行效果截图:
代码截图
悬停前和离开后
动图
代码说明:这里面确实一次为这个段落创建了两个事件,都是DOM通用的事件,一个叫mouseover(鼠标悬停),一个叫mouseout(鼠标离开),mouseover事件触发时要用到2个函数(function), 分别是chfgcolor和chbgcolor, 而mouseout只用到1个chback函数。
还有,事件触发时会运行一些东西,但是不一定是函数。
更直观地说,可以在开发人员工具的查看器里面看到这两个事件(event)