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这些事件的区别,也看了一些博客,感觉不是很清楚,所 ...
随机推荐
- DRF框架（一）——restful接口规范、基于规范下使用原生django接口查询和增加、原生Django CBV请求生命周期源码分析、drf请求生命周期源码分析、请求模块request、渲染模块render
DRF框架 全称:django-rest framework 知识点 1.接口:什么是接口.restful接口规范 2.CBV生命周期源码 - 基于restful规范下的CBV接口 3.请求组件 ...
- B站动态转发抽奖脚本+教程
运行python脚本需要的条件: 1.连通的网络 2.已安装Python2并配置环境变量 3.Python脚本源码 环境搭建: 网络就不用我说了("'▽'") 那么下面我们来安装 ...
- ZYNQ笔记（1）：PL端——led灯
ZYNQ分为PS和PL,此博客实际上是FPGA中一个完整的FPGA工程的创建. PS:处理系统 (Processing System) 即ARM的Soc部分 PL:可编程逻辑(Programable ...
- Codeforces Round #499 (Div. 1)
Codeforces Round #499 (Div. 1) https://codeforces.com/contest/1010 为啥我\(\rm Div.1\)能\(A4\)题还是\(\rm s ...
- 或与异或 [背包DP]
也许更好的阅读体验 \(\mathcal{Description}\) 给定\(n\)和长度为\(n\)的数组\(a\) 问从\(a\)中选取任意个数使得其 异或起来的值 等于 或起来的值 的方案数 ...
- Jquery 跨Dom窗口操作
. 子窗口给父窗口元素赋值 function modifyTheme(id){ $("#parent_dom",window.parent.document).attr(" ...
- resfframework中修改序列化类的返回值
在序列化类中重写to_representation(self,instance)方法,这个是返回json对象的方法,返回的是一个待序列化的对象,可以直接对这个类进行定制,有关关联查询也可以在这里进行定 ...
- oracle之PLSQL导出-导入-表-存储过程等操作--亲测好用
1.背景 实际开发中考虑到安全,不会将生产库的数据和本地开发数据进行同步操作,而是采用导入导出sql语句的方式操作; 例如在开发环境写好的存储过程要更新到生产环境,那么就需要使用导出和导入功能. 2. ...
- element中日期时间插件（DateTimePicke） el-date 开始时间大于等于当前时间小于结束时间，结束时间大于开始时间且大于当前时间
pickerOptions1: { disabledDate: time => { if (this.endTime) { return ( time.getTime() > new Da ...
- Python学习日记(二十八) hashlib模块、configparse模块、logging模块
hashlib模块 主要提供字符加密算法功能,如md5.sha1.sha224.sha512.sha384等,这里的加密算法称为摘要算法.什么是摘要算法?它又称为哈希算法.散列算法,它通过一个函数把任 ...