<!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. 【读书笔记】胡说IC

  2. FMX 窗口置顶 或置底 xe10

    FMX 窗口置顶  或置底 xe10 Popup 置底 StayOnTop 置顶

  3. Java函数式编程

    函数式编程 从JDK1.8开始为了简化使用者进行代码的开发,专门提供有lambda表达式的支持,利用此操作形式可以实现函数式的编程,对于函数编程比较著名的语言是:haskell.Scala,利用函数式 ...

  4. 获取当前URL地址和$_GET获取参数

    用这个方法,可以在不使用$_get[]就可以获取get传过来的参数.还可以获取当前的URL public function getCurrentUrl() { $pageURL = 'http'; i ...

  5. 复杂sql语句之单字段分类count计数和多字段count计数

    SELECT AF_DEPARTMENT, dept.FULLNAME, SUM(CASE AF_CLASSIFY WHEN THEN ELSE END) AS 'o_standard', (COUN ...

  6. 阿里巴巴 Java 开发手册 (九) 异常日志

    (一) 异常处理 1. [强制]Java 类库中定义的一类 RuntimeException 可以通过预先检查进行规避,而不应该 通过 catch 来处理,比如:IndexOutOfBoundsExc ...

  7. java之mybatis之字段映射及多对一

    1. 数据库中表的列名和实体类的属性名称不一致. 可以使用 resultMap来解决. <select id="findAll" resultMap="UserMa ...

  8. 你需要知道的 5 个 Linux 新手会犯的失误

    Linux 爱好者们分享了他们犯下的一些最大错误. 终身学习是明智的 —— 它可以让你的思维敏捷,让你在就业市场上更具竞争力.但是有些技能比其他技能更难学,尤其是那些小菜鸟错误,当你尝试修复它们时可能 ...

  9. 如何用JS获取地址栏参数的方法

    采用正则表达式获取地址栏参数: 写一个方法来进行正则匹配,同样也可以复用 function GetPar(name) { var reg = new RegExp("(^|&)&qu ...

  10. 正则表达式修饰符 i、g、m、s、U、x、a、D、e 等。

    正则表达式中常用的模式修正符有i.g.m.s.U.x.a.D.e 等. 它们之间可以组合搭配使用. i 不区分(ignore)大小写: 例如: /abc/i 可以匹配 abc.aBC.Abc g 全局 ...