<!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. C++函数形参与实参交换

    c++中函数的实参传递到形参的值是单向的,改变形参并不会影响实参. #include <iostream> using namespace std; void swap(int a, in ...

  2. Go基础编程实践（八）—— 系统编程

    捕捉信号 // 运行此程序,控制台将打印"Waiting for signal" // 按Ctrl + C 发送信号以关闭程序,将发生中断 // 随后控制台依次打印"Si ...

  3. VMware Workstation 15 Player使用centos页面版本如何查看ip

    首先运行要使用的centos镜像,输入密码登陆进去 因为是界面版,所以就不需要再镜像中输入命令,但是因为这样又找不到没法用ifconfig查看ip怎么办?  这个就是类似于一个系统页面版本的linux ...

  4. PTA A1017

    A1017 Queueing at Bank (25 分) 题目内容 Suppose a bank has K windows open for service. There is a yellow ...

  5. kafka使用SASL_PLAINTEXT做用户认证

    使用SASL/PLAIN认证 server端1.配置brokerkafka_server_jaas.conf内容KafkaServer {org.apache.kafka.common.securit ...

  6. C#服务器全面讲解与制作

    C#服务器全面讲解与制作一 环境配置与基础架构 环境配置 基础的服务器架构 这里我会讲解高级的C#服务器的全面制作流程 会对大家有很大的帮助 不过在这个教程中主要是讲解服务器的制作,所以不会讲解客户端 ...

  7. tf.concat的用法

    import numpy as npimport tensorflow as tfsess=tf.Session()a=np.zeros((1,2,3,4))b=np.ones((1,2,3,4))c ...

  8. python基础知识(七)---数据类型补充、"雷区"、编码

    数据类型补充."雷区".编码 1.数据类型补充 str: #字符串数据类型补充 s1=str(123) #常用于类型转换 print(s1) #capitalize()首字母大写 ...

  9. SpringCloud之服务注册与发现Eureka+客户端Feign

    前言 SpringCloud 是微服务中的翘楚,最佳的落地方案. Eureka 作为注册中心,是 SpringCloud 体系中最重要最核心的组件之一. Feign 使用接口加注解的方式调用服务,配合 ...

  10. 如何选择优秀的APS系统供应商？问自己这几个问题！

    高级的计划和排程和生产排程软件的好处是巨大的.然而,生产排程软件不是商品,尚不能保证您选择的任何高级的计划和排程软件能满足您的所有需求. 那么,我们来谈谈如何选择适合你的公司最好的生产排程软件.这需要 ...