<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML事件(onclick、onmouseover、onmouseout、this)</title>
<!--
<ele onclick="a";>//鼠标单机HTML中的元素ele后，执行代码a;
<ele onmouseover="a";>//鼠标经过HTML中的元素ele时，执行代码a;
<ele onmouseout="a";>//鼠标移出HTML中的元素ele后，执行代码a;
this:一）在包含事件的HTML元素内使用，代表该元素本身
<ele 事件="this.style.background='red'">;//this=ele
表示触发事件时，将元素ele的背景颜色变成红色
二）用于将包含事件的HTML元素作为实参传给函数；
<ele 事件="函数(this,"参数1","参数2")>
表示通过this将ele元素传参给函数并与之绑定，同时可以设置参数1、参数2..参数n
function 函数(a,参数1,参数2){ //这里的a=this=ele，可以随便命名，表示将元素ele引入函数
a.style.color=参数1;//为元素a设置字体颜色，颜色值可以直接写明(如:a.style.color="red"),也可以通过参数1将HTML中参数1的值传递过来
}
tips：
1）参数this始终表示包含事件的元素ele，
2）HTML中this在函数参数的位置对应script中函数的参数位置（例：在HTML中<ele function(a,this);>；this是第二个参数，那么在script中function(x,y)第二个参数y就是this;
3）因为是在HTML中调用了script内的函数，所以，script中函数的参数最终值=HTML中元素ele内设置的参数值；
-->
<style>
.a{
width: 100px;
height: 40px;
background: red;
margin-top: 10px;
border-radius: 10px/10px;
}
.b{
width: 100px;
height: 40px;
background: greenyellow;
margin-top: 10px;
border-radius: 10px/10px;
}
</style>
</head>
<body>
<!-- 如下：单机按钮弹出“我是谁”，移入鼠标时背景变为粉色，移出鼠标后背景变为透明 -->
<input type="button" value="按钮" onclick="alert('我是谁')" onmouseover="this.style.background='pink'" onmouseout="this.style.background='transparent'" /><!-- 单机按钮后页面弹出“我是谁” -->
<!-- 如下：鼠标移入div时，执行函数fun1；移出div后，执行函数fun2；//this代表整个div元素，并和函数绑定，此时函数的两个参数分别是x=this=div,y=background=blue; -->
<div class="a" onmouseover="fun1(this,'blue')" onmouseout="fun2(this,'red')">a</div>
<!-- 如下：鼠标移入div时，执行函数fun3；移出div后，执行函数fun4，//此时函数只有一个参数就是this=div -->
<div class="b" onmouseover="fun3(this)" onmouseout="fun4(this)">b</div>
<script>
//div.a
function fun1(x,y){ //参数x=this=div.a;参数y='blue';
x.style.background=y;//div.a{background: blue;}鼠标移入div.a时，div变为蓝色
console.log(x);
}
function fun2(x,y){ //参数x=this=div.a;参数y='red';
x.style.background=y;//div.a{background: red;}鼠标移出div.a后，div变为红色
console.log(x);
}
//div.b
function fun3(Q){ //参数x=this=div.b;
Q.style.background="grey";//div.b{background: grey;}鼠标移入div.b时，div变为灰色
console.log(Q);
}
function fun4(随便){ //参数：随便=this=div.b;
随便.style.background="greenyellow";//div.b{background: greenyellow;}鼠标移出div.b后，div变成黄绿色
console.log(随便);
}
</script>
</body>
</html>