<!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. Jupyter notebook 安装

    一.建议从官网下载最新版anaconda https://www.anaconda.com/ 进入网址找到下载位置,并找到对应的版本,下载python3.7,根据电脑系统自行选择32/64位进行下载, ...

  2. FMX 隐藏任务栏 xe10

    找了好多信息,测试好些,xe10  隐藏只要以下命令 隐藏 ShowWindow(ApplicationHWND, SW_HIDE); 显示 ShowWindow(ApplicationHWND, S ...

  3. HttpClient参观记：.net core 2.2 对HttpClient到底做了神马

    .net core 于 10月17日发布了 ASP.NET Core 2.2.0 -preview3,在这个版本中,我看到了一个很让我惊喜的新特性:HTTP Client Performance Im ...

  4. 用C#做一个 拉流播放器

    做拉流播放器第一个想到就是,.,..FFmpeg没错 我也是用强大的他它来做的.但是我用的不是  cmd 调用 而是用的强大的FFmpeg.AutoGen FFmpeg.AutoGen 这个是C# 一 ...

  5. java之mybatis之使用mybatis实现crud操作

    目录结构: 1.封装 mybatis 的工具类: MybatisUtil.java public class MybatisUtil { private static SqlSessionFactor ...

  6. python 安装 SQLAlchemy 报错

    安装 SQLAlchemy 报错 安装命令 pip install -i https://pypi.doubanio.com/simple SQLAlchemy 报错截图 编码错误,这里我们需要改下源 ...

  7. php操作mysql，1分钟内插入百万数据

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_33862644/article/d ...

  8. CentOS安装MySQL8.x

    MySQL的安装 (4,5,6可省略) 声明:CentOS版本为7.6,安装的MySQL版本为8.0.17 1. 首先要卸载掉本机自带的mysql相关,包括MariaDB. rpm -pa | gre ...

  9. 【Flask】 python学习第一章 - 5.0 模板

    jinjia2 模板 python实现 flask 内置语言  参照Djago实现  设置模板文件夹 设置模板语言 jinja2 demo6_template.html  ----> 从代码渲染 ...

  10. Pthon面向对象-特殊属性

    Pthon面向对象-特殊属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   一.特殊属性 #!/usr/bin/env python #_*_conding:utf-8_*_ ...