HTML事件(onclick、onmouseover、onmouseout、this)
<!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>
HTML事件(onclick、onmouseover、onmouseout、this)的更多相关文章
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 侧边栏收起展开效果，onmouseover,onmouseout
//方法一<!doctype html> <html lang="en"> <head> <meta charset="UTF- ...
- onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave
[onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave] 1.onmouseleave.onmouseenter,鼠标进入到指定元素区 ...
- 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解
1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...
- JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...
- JS事件 鼠标单击事件( onclick ）通常与按钮一起使用。onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行
鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 比如,我们单击按钮时,触发 ...
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别
疫情过后回武汉的第一天打卡,今天偶然遇到一个问题onmouseover .onmouseout 与onmouseenter .onmouseleave这些事件的区别,也看了一些博客,感觉不是很清楚,所 ...
随机推荐
- day01——python初始、变量、常量、注释、基础数据类型、输入、if
python的历史: 04年Django框架诞生了 内存回收机制是什么(面试题) python2:源码不统一,有重复的功能代码 python3:没有重复的功能代码 python是一个什么的编程语言 编 ...
- DS 图解快排
快速排序是交换排序,是冒泡排序的改进版. 快排过程: 1.选定一个分界值 2.分成三个部分(小于分界部分,分界值,大于分界值部分) 3.对于分开的两 ...
- spark2.2 从入门到精通全套视频教程（含网盘下载地址）
Spark2.2从入门到精通链接:https://pan.baidu.com/s/1GnPq_p4wOV916REMB_XJ5w 提取码:16zp
- Hive 系列（三）—— Hive CLI 和 Beeline 命令行的基本使用
一.Hive CLI 1.1 Help 使用 hive -H 或者 hive --help 命令可以查看所有命令的帮助,显示如下: usage: hive -d,--define <key=va ...
- 如何在ArcGIS饼状图中下方添加文字
内容源自:ArcGIS10.2基础教程(丁华) 书上要求在统计图的饼状图下方显示“总面积组成”,以及图例是只显示文字. 该如何操作呢? 其实就是在高级属性中选择标题-副标题-显示“总面积组成”即可 而 ...
- Jquery+CSS实现遮罩效果
JavaScript: (function ($) { $.fn.ShowMask = function (options) { var defaults = { top: 150, left: 20 ...
- 关于django数据库迁移 以及显示未检测到更改的问题
No changes detected 显示这样的原因 数据库迁移代码步骤: 今天在所有数据库的时候对数据库进行了删除,重新迁移数据库映射,但是却发现终端给出了这样的信息. '>>> ...
- 【面试突击】-SpringBoot面试题（一）
Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成为一名 Spring Boot 的专家. 问题一 Spring Boot.Spring MVC 和 Spring 有什么区别 ...
- Flink入门 - CoGroup和Join
/* *CoGroup */ final StreamExecutionEnvironment streamExecutionEnvironment = StreamExecutionEnvironm ...
- Spring AOP 原理的理解
>AOP基本概念 1)通知(Advice):织入到目标类连接点上的一段程序代码.通知分为五种类型: - Before:在方法被调用之前调用 - After:在方法完成后调用通知,无论方法是否执行 ...