<!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)的更多相关文章

  1. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  2. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  3. 侧边栏收起展开效果，onmouseover,onmouseout

    //方法一<!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  4. onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave

    [onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave] 1.onmouseleave.onmouseenter,鼠标进入到指定元素区 ...

  5. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  6. JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  7. JS事件 鼠标单击事件( onclick ）通常与按钮一起使用。onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行

    鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 比如,我们单击按钮时,触发  ...

  8. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  9. JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别

    疫情过后回武汉的第一天打卡,今天偶然遇到一个问题onmouseover .onmouseout 与onmouseenter .onmouseleave这些事件的区别,也看了一些博客,感觉不是很清楚,所 ...

随机推荐

  1. 如何同时读取 TDateTimePicker 的 Date 和 Time ？

    由于 TDateTimePicker 只能用于日期或时间,不能同时使用.如果将Kind属性设置为dtkDate,则可以指定自定义DATE格式,但忽略任何TIME格式,并且Time未定义使用该属性.如果 ...

  2. Django框架（十二）-- 中间件、CSRF跨站请求伪造

    中间件 一.什么是中间件 请求的时候需要先经过中间件才能到达django后端(urls,views,templates,models) 响应的时候也需要经过中间件才能到达web服务网关接口 djang ...

  3. 用GraphicsMagick处理svg转png遇到的坑

    1前言 用GraphicsMagick处理svg转png,且背景是透明且没有黑边,由于使用虚拟机的gm版本是1.3.28导致有黑边问题且svg中path中有opacity属性时,加上+antialia ...

  4. prometheus2.0 联邦的配置

    参考:https://blog.51cto.com/lee90/2062252 官网对于联邦的介绍:https://prometheus.io/docs/prometheus/latest/feder ...

  5. 2019 欢聚时代java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.欢聚时代等公司offer,岗位是Java后端开发,因为发展原因最终选择去了 欢聚时代,入职一年时间了,也成为了 ...

  6. Java visualvm

    简介 VisualVM是一个集成多个JDK命令行工具的可视化工具.可以作为Java应用程序性能分析和运行监控的工具.开发人员可以利用它来监控.分 析线程信息,浏览内存堆数据.系统管理员可以利用它来监测 ...

  7. Python人工智能第二篇：人脸检测和图像识别

    Python人工智能第二篇:人脸检测和图像识别 人脸检测 详细内容请看技术文档:https://ai.baidu.com/docs#/Face-Python-SDK/top from aip impo ...

  8. ajax的五大步骤

    什么是Ajax? AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. var btn = document.getElementsByTagName('button')[ ...

  9. 原油petrolaeum石油 Archaic spelling of petroleum

    petrolaeum (uncountable) Archaic spelling of petroleum petroleum See also: Petroleum Contents [hide] ...

  10. 在Linux系统上安装Spring boot应用

    Unix/Linux 服务 systemd 服务 操作过程 1. 安装了JDK的centOS7虚拟机 注意下载linux版本JDK的时候不能直接通过wget这种直接链接下载,否则会解压不成功,应该打开 ...