事件类型(鼠标、键盘、浏览器)

这篇具有很好参考价值的文章主要介绍了事件类型(鼠标、键盘、浏览器)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


事件类型

鼠标事件

1、onmouseover鼠标移入事件

在鼠标指针移动到元素上时触发

2、onmouseout 鼠标移出事件

在鼠标指针移出元素后触发

3、onmouseenter鼠标进入事件

在鼠标指针进入到元素上时触发

4、onmouseleave 鼠标离开事件

在鼠标指针离开元素后触发

5、onfocus获取焦点事件

在鼠标光标获取输入框焦点时触发

6、onblur失去焦点事件

在鼠标光标失去焦点时触发

7、onclick单击事件

在鼠标指针单击时触发

8、ondblclick双击事件

在鼠标光标双击时触发

9、onmousedown按下事件

10、onmouseup抬起事件

11、onmousemove移动事件

键盘事件

onkeydown:键盘按下

onkeyup:键盘抬起

浏览器事件

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

事件进阶

监听事件

1、绑定监听事件 addEventListener(“事件的类型”,事件的处理程序)
2、解绑监听事件removeEventListener(“事件的类型”,事件的处理程序)

事件对象

任何事件都有内置对象event,事件对象的兼容性写法为

var event = event || window.event;

事件的类型

console.log(event.type);

元素的ID

console.log(event.target.id);

文本的内容

 console.log(event.target.innerText);

案例:鼠标移入图片显示,移出消失

css部分文章来源地址https://www.toymoban.com/news/detail-828880.html

<style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: fixed;
        top: 200px;
        right: 10px;
        width: 100px;
        height: 100px;
      }
      .box>img {
        width: 100%;
      }
      #box1 {
        width: 200px;
        height: 200px;
        position: fixed;
        top: 200px;
        right: 120px;
        /*隐藏盒子*/
        background-color: aquamarine;
        display: none;
      }
      #box1>img {
      	width:100%;
      }
    </style>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"><img src="./images/wx.jpg" alt="" /></div>
    <div id="box1"><img src="./images/img.jpg" alt="" /></div>
  </body>
  <script>
  //获取元素
    var box = document.getElementsByClassName("box")[0];
    var box1 = document.getElementById("box1");
    //添加鼠标移入事件
    box.onmouseover = function () {
      box1.style.display = "block";
    };
    //添加鼠标移出事件
    box.onmouseout = function () {
      box1.style.display = "none";
    };
  </script>
</html>

到了这里,关于事件类型(鼠标、键盘、浏览器)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 谈一谈浏览器与Node.js中的JavaScript事件循环,宏任务与微任务机制

    JavaScript是一个单线程非阻塞的脚本语言。这代表代码是执行在一个主线程上面的。但是JavaScript中有很多耗时的异步操作,例如AJAX,setTimeout等等;也有很多事件,例如用户触发的点击事件,鼠标事件等等。这些异步操作并不会阻塞我们代码的执行。例如: 可以看到,上述代

    2024年02月12日
    浏览(48)
  • 浏览器事件循环(事件轮询)

    浏览器事件循环(Browser Event Loop)是浏览器用于处理用户输入、网络请求、渲染和其他异步事件的机制。这个循环确保了 JavaScript 代码的执行是非阻塞的,允许浏览器同时处理多个任务,从而提高用户体验。以下是浏览器事件循环的详细说明: 调用栈: 当一个 JavaScript 脚本

    2024年01月19日
    浏览(50)
  • Microsoft Edge浏览器只能在地址栏输入地址进入,不能进行搜索

    Microsoft Edge浏览器只能在web栏搜索网站,而不能用搜索栏搜索。 而且有一个很奇怪的现象,当我在搜索栏中搜索的时候,搜索内容自动填充进了web栏中,而搜索栏没有任何东西,然后进行搜索后,页面出现错误。 当电脑的Microsoft用户是不是与Microsoft Edge用户不一样的时候就有

    2024年02月12日
    浏览(76)
  • Chrome浏览器 键盘快捷键整理

    名人说:莫听穿林打叶声,何妨吟啸且徐行。—— 苏轼《定风波·莫听穿林打叶声》 本篇笔记整理:Code_流苏(CSDN) (一个喜欢古诗词和编程的Coder😊) 浏览器快捷键 是指按键或按键组合,可以提供另一种方式来执行通常使用鼠标执行的操作。例如,你可以使用快捷键来打开

    2024年02月05日
    浏览(51)
  • 在?聊聊浏览器事件循环机制

    目录 前言  同步/异步编程模型 同步 异步 JS异步模型 调用栈 任务队列 宏任务队列 微任务队列 微任务API 事件循环 队列优先级 混合队列 事件循环实现 总结 参考文章 Event-Loop可视化工具 JS是单线程语言,在某个时间段只能执行一段代码。这种单线程模型的好处是不会出现多

    2024年02月10日
    浏览(65)
  • 浏览器事件循环Event Loop

    引言: 事件循环不是浏览器独有的,从字面上看,“循环”可以简单地认为就是重复,比如for循环,就是重复地执行for循环体中的语句,所以事件循环,可以理解为重复地处理事件,那么下一个问题是,处理的是什么事件,事件的相关信息从哪里获取。 因为我没有用nodejs做

    2024年02月05日
    浏览(55)
  • 【JavaScript】2.4 JavaScript和浏览器

    JavaScript最初是为了在浏览器中使用而创建的,它是Web开发的重要组成部分。在这一章节中,我们将学习如何使用JavaScript与浏览器进行交互。 DOM(Document Object Model)是一个编程接口,它允许JavaScript操作HTML文档的内容和结构。HTML文档被解析成一个DOM树,我们可以通过JavaScrip

    2024年02月04日
    浏览(45)
  • dlink路由器IE浏览器地址栏输入192.168.0.1无法进入管理界面

    1.检查电脑是否和LAN口(1,2,3,4口中任意一口)连好,对应的指示灯是否是亮的 2.如果是拨号上网的用户,请先删除宽带的拨号连接 3.检查IE是否设置了代理,如果有请取消。点击浏览器里面的工具→Internet选项→连接,如下图: 若设置了代理以后,也会造成网页打不开的现象

    2024年02月06日
    浏览(50)
  • 03 Web全栈 浏览器内置对象/事件/ajax

    浏览器是一个JS的运行时环境,它基于JS解析器的同时,增加了许多环境相关的内容,用一张图表示各个运行环境和JS解析器的关系如下: 我们把常见的,能够用JS这门语言控制的内容称为一个JS的运行环境,常见的运行环境又Nodejs,浏览器,小程序,一些物联网设备等等,所

    2024年02月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包