事件类型（鼠标、键盘、浏览器）

最新推荐文章于 2024-07-29 11:53:27 发布

一览星梦辰

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量1.5k

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_71242735/article/details/129737632

版权

事件类型

鼠标事件

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部分

<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>