<!DOCTYPE html> <html lang="en"> <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>