UI事件和鼠标事件

最新推荐文章于 2022-10-08 10:41:31 发布

憨憨励志学前端

最新推荐文章于 2022-10-08 10:41:31 发布

阅读量228

点赞数

分类专栏：事件 CSS基础文章标签： html

本文链接：https://blog.csdn.net/weixin_52589346/article/details/125104892

版权

本文详细介绍了HTML中的UI事件，包括load、resize和scroll等，并深入讲解了鼠标事件，如onclick、onmouseover和onmousemove等。同时，讨论了事件坐标的位置属性，如screenX、screenY以及在不同情况下的坐标计算。文中还提供了代码示例和截图，帮助读者更好地理解和应用这些事件。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、UI事件(不一定与用户操作有关的事件)

1.load当页面完全加载后在window上触发图片也可以触发load事件
2.resize当窗口大小变化在window上触发
3.scroll当用户滚动带滚动条的元素的内容时，在该元素上面

二、鼠标事件

1.事件类型

1.onclick(单击)
2.ondblclick(双击)
3.oncontextmenu(右键菜单)
4.onmouseover(移入)
5.onmouseout(移出)
6.onmouseenter(移入)
7.onmouseleave(移出)
8.onmousedown(按下)
9.onmouseup(抬起)
10.onmousemove(移动)

2.坐标位置

1.screenX在屏幕中的x坐标
2.screenY在屏幕中的y坐标
3.相对于body
a.clientX表示事件发生时鼠标指针在视口中的水平坐标(不包含滚动距离)
b.clientY在视口的垂直坐标
c.IE没有以下两个属性：
pageX在页面中的X坐标(包含滚动距离)
pageY在页面中的Y的坐标
4.获取点击目标的坐标(有兼容性)
offsetX,offsetY

3.代码举例

1.代码

**<!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>
    <style>
        * {
   
            margin: 0;
            padding: 0

最低0.47元/天解锁文章

憨憨励志学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UI事件和鼠标事件

1.load当页面完全加载后在window上触发图片也可以触发load事件2.resize当窗口大小变化在window上触发3.scroll当用户滚动带滚动条的元素的内容时，在该元素上面1.onclick(单击)2.ondblclick(双击)3.oncontextmenu(右键菜单)4.onmouseover(移入)5.onmouseout(移出)6.onmouseenter(移入)7.onmouseleave(移出)8.onmousedown(按下)9.onmouseup(抬起)1
复制链接

扫一扫

专栏目录