<!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. 微信小程序获取微信绑定的手机号

    怎么获取微信绑定手机号呢?我们授权登录的时候,我们只能获取微信登录人员的头像,昵称,性别之类的,而手机号需要二次授权才可以,那么获取手机号都需要哪些条件呢?来看官方文档 获取手机号 获取微信用户绑定的 ...

  2. 《JAVA高并发编程详解》-Thread对象的启动

    当我们用关键字new创建一个Thread对象时,此时它并不处于执行状态,因为没有调用start方法启动该线程,那么线程的状态为NEW状态,NEW状态通过start方法进入RUNNABLE状态. 线程一 ...

  3. Spring MVC之@ControllerAdvice详解

    本文链接:https://blog.csdn.net/zxfryp909012366/article/details/82955259   对于@ControllerAdvice,我们比较熟知的用法是 ...

  4. Net实现钩子函数(Hook)以及通过SendMessage实现自动点击按钮和给文本框赋值

    1.实现钩子函数 钩子(Hook)的实现需要三个主要的函数和一个委托 [DllImport("user32.dll", CharSet = CharSet.Auto, Callin ...

  5. mysql-数据备份与存储过程

    目录 修改隔离级别 存储过程 什么是存储过程 用来干什么 三种数据处理方式 备份与恢复 修改隔离级别 修改全局的 set global transaction isolation level read ...

  6. The XOR Largest Pair(tire树)

    题目 The XOR Largest Pair 解析 一年前听学长讲这道题,什么01trie,好高级啊,所以没学,现在一看.... 看到xor就应该想到二进制,一看数据\(A_i< 2^{31} ...

  7. Content Security Policy (CSP)内容安全策略

    CSP简介 Content Security Policy(CSP),内容(网页)安全策略,为了缓解潜在的跨站脚本问题(XSS攻击),浏览器的扩展程序系统引入了内容安全策略(CSP)这个概念. CSP ...

  8. 手写MQ框架（一）-准备启程

    一.背景 很久以前写了DAO框架和MVC框架,前段时间又重写了DAO框架-GDAO(手写DAO框架(一)-从“1”开始,源码:https://github.com/shuimutong/gdao.gi ...

  9. Vue学习之npm常用命令及参数小结（十四）

    NPM几个常用命令和参数的意思: npm install packagename 安装模块如不指定版本号 默认会安装最新的版本 npm install packagename 0.0.1 安装指定版本 ...

  10. Appscan漏洞之会话标识未更新

    本次针对 Appscan漏洞 会话标识未更新 进行总结,如下: 1. 会话标识未更新 1.1.攻击原理 在认证用户或者以其他方式建立新用户会话时,如果不使任何现有会话标识失效,攻击者就有机会窃取已认证 ...