事件对象e

最新推荐文章于 2022-11-15 17:36:04 发布
最新推荐文章于 2022-11-15 17:36:04 发布
阅读量75 收藏
点赞数
分类专栏： JavaScript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuehaocyuyan/article/details/119680731
版权
本文详细解析了HTML页面中鼠标事件对象e的三个关键属性：client（相对于浏览器）、page（相对于整个网页）和offset（相对于事件源）。通过实例代码演示了如何在JavaScript中获取并使用这些坐标，帮助开发者理解鼠标位置的计算原理。
摘要由CSDN通过智能技术生成

文章目录


#1.详解
#2.代码

详解
事件对象e：box.事件=function(e){} 鼠标:client——鼠标指针相对于浏览器的坐标
page——相对于整个网页
offset——相对于事件源，计算的是最内层的盒子

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
代码

在这里插入代码片
<!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>事件对象之鼠标</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 2000px;
            /* 为了加进度条 */
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div>
        <div id="box"></div>
        <p></p>
    </div>
</body>
<script>
    var box = document.getElementById('box')
    var p = document.querySelector('p')
    box.onmousemove = function (e) {
        p.style.marginLeft = '100px'
        p.innerHTML = 'offsetX/Y:' + e.offsetX + ',' + e.offsetY + "<br>" +
            'clientX/Y:' + e.clientX + ',' + e.clientY + "<br>" +
            'pageX/Y:' + e.pageX + ',' + e.pageY + "<br>"
    }
</script>

</html>

具体效果自己复制到解释器里看
over

Sarnwan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对象篇--事件
小乔与你同在
12-09 260
事件是用户在访问页面时执行的操作，它包含了用户与页面的所有交互，比如单击，键盘按下某键等。简单来说事件就是当我们做出对应的动作时触发对应的代码。 1 基础介绍 window对象：浏览器对象。 ""和’'有区别？ 答：其实没什么区别，就是用来嵌套使用。 （1）单引号里面使用双引号 （2）双引号里面使用单引号 2 事件定义方式： 方式一：<元素 事件=”事件处理程序”> 方式二：<元...
JavaScript笔记 06：事件对象
Alice_Lee_Lee的博客
07-01 198
事件对象、事件冒泡、事件绑定、事件传播、鼠标滚轮事件、键盘事件
有关javascript中事件对象e
qq_44718039的博客
11-15 2731
js中的事件对象e
事件对象e的e.target
weixin_49602426的博客
09-11 2904
事件对象是事件的一系列相关数据的集合，跟事件相关。eg: 鼠标点击里面就包含了鼠标的信息（属性和方法）、键盘按下就包含了键盘事件的信息；事件对象是系统给我们自动创建的，不需要我们传递参数；事件对象只有事件（onclick、click等）存在的时候才会存在；事件对象只是一个形参，我们可以自己命名：event、e、ele等；btn.onclick = function(e){ // 这里的e就是所谓的事件对象e.target}e.target返回的是触发事件的对象（元素）。那么它和this。
JavaScript事件进阶：事件对象e(event)（三）
weixin_40981660的博客
08-16 4404
本章字数7873字。 上一篇文章《JavaScript进阶认识：什么是事件冒泡过程与捕获过程？有什么用处？》我们讲到事件对象e，利用了一个方法e.target，通过冒泡过程，从而实现了点击父级元素里面的子元素触发父级元素事件，再从父级元素事件对象e，找到真正触发事件发生的子元素源，实现隔行换色的代码。这个技巧要认真琢磨。 那么，什么是事件对象e呢？ 事件对象e，是event的简称。当一个事件被触发时候，这个事件的有关数据都会被存储在一个事件对象e里面，这个对象e有许多固定方法提供给我们查看里面各种数据。 我
jQuery中事件对象e的事件冒泡用法示例介绍
10-26
事件对象e是JavaScript和jQuery中用来描述事件的参数对象，它包含了许多有用的信息，如事件类型、触发事件的元素、事件的坐标等。通过使用事件对象，开发者可以对事件进行更精细的控制，从而实现更加丰富和动态的...
【学习】：React的触发函数参数包括事件对象e和其他参数的情况
CSmengy473的博客
09-26 1352
React的触发函数参数包括事件对象e和其他参数的情况 写一个函数，同时传递事件对象和一个自定义参数。 分为两种情况的函数写法和函数调用：箭头函数、普通函数 每种函数写法也对应着 仅有事件对象/事件对象+自定义参数的情况 对于传递事件对象和其他参数的函数，可以最后追加一个参数，即可接收event。 文章目录React的触发函数参数包括事件对象e和其他参数的情况一、箭头函数1.只有event事件对象2.event事件对象+自定义参数二、普通函数1.只有event事件对象2.event事件对象+自定义参数三、
微信小程序事件对象中e.target和e.currentTarget的区别详解
10-17
首先，微信小程序中的事件对象，可以简称为e，在事件处理函数中被自动传入。这个事件对象包含了多个属性，其中target和currentTarget是用于判断事件来源和绑定目标的关键属性。 e.target属性指向的是触发事件的源头...
jQuery事件对象的属性和方法详解
12-11
jQuery事件对象的属性和方法，供大家参考，具体内容如下 事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 event.type：获取事件的类型 触发元素的事件类型 $("a").click...
js实现导航栏的下拉表单
xuehaocyuyan的博客
07-02 5511
用js实现鼠标经过时下拉表单显示隐藏 代码含详细注释 可运行 主要思路就是获取下拉表单之后鼠标在就显示，不在就隐藏，js代码比较简单，反而是css比较多，下面给出完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
js实现留言板
xuehaocyuyan的博客
07-02 2653
具体的实现看以下代码，代码包含详细注释。效果图如下 输入内容为空 发布： 删除： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
new调用函数-----new 函数()
xuehaocyuyan的博客
08-17 1407
new 函数() new调用函数四步走：1.函数体内会自动创建出一个空白对象 2.函数的上下文this会指向这个对象 3.执行函数体内的语句 4.函数会自动返回上下文对象，即使函数没有return对象 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
跑马灯——轮播图特效
xuehaocyuyan的博客
08-15 953
跑马灯——轮播图特效 js和动画结合完成 延时器处理一些瞬间切换问题 在这里插入代码片 <!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
js实现猜数字
xuehaocyuyan的博客
08-19 746
js实现猜数字0-9 才对弹出对了，猜小弹出小了，猜大弹出大了，没写弹出重新填写，直至猜对为止 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
事件对象之方法e.preventDefault()
xuehaocyuyan的博客
08-14 746
事件对象3e: e.preventDefault():阻止某些事 ——表单、鼠标滚轮 鼠标滚轮事件：onmousewheel: e.deltaY 小例子：鼠标在盒子内部滚动时页面不滚动 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
js实现搜索框提示
xuehaocyuyan的博客
07-03 536
这里主要运用js中dom的事件流来进行处理 代码包含详细注释 可运行 效果图： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.
js定时器设置计时器
xuehaocyuyan的博客
07-05 503
该知道的都知道的，不知道的代码里都有 实现代码： <!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=
定时器设置动画（js）
xuehaocyuyan的博客
07-05 501
该知道的都知道了，不知道的代码里都有 <!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"&gt
js和css结合实现动画
xuehaocyuyan的博客
07-05 394
该知道的都知道了，不知道的代码里都有 实现代码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, init
js事件对象e的ts类型校验
最新发布
03-31
可以使用以下类型来校验JS事件对象e的类型： ```typescript interface MouseEvent extends UIEvent { readonly altKey: boolean; readonly button: number; readonly buttons: number; readonly clientX: number; readonly clientY: number; readonly ctrlKey: boolean; readonly metaKey: boolean; readonly movementX: number; readonly movementY: number; readonly offsetX: number; readonly offsetY: number; readonly pageX: number; readonly pageY: number; readonly relatedTarget: EventTarget | null; readonly screenX: number; readonly screenY: number; readonly shiftKey: boolean; readonly x: number; readonly y: number; } interface KeyboardEvent extends UIEvent { readonly altKey: boolean; readonly code: string; readonly ctrlKey: boolean; readonly isComposing: boolean; readonly key: string; readonly location: number; readonly metaKey: boolean; readonly repeat: boolean; readonly shiftKey: boolean; } interface UIEvent extends Event { readonly detail: number; readonly view: Window | null; } interface Event { readonly bubbles: boolean; cancelBubble: boolean; readonly cancelable: boolean; readonly composed: boolean; readonly currentTarget: EventTarget | null; readonly defaultPrevented: boolean; readonly eventPhase: number; readonly isTrusted: boolean; returnValue: boolean; readonly target: EventTarget | null; readonly timeStamp: number; readonly type: string; composedPath(): EventTarget[]; initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void; preventDefault(): void; stopImmediatePropagation(): void; stopPropagation(): void; } interface EventTarget { addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void; dispatchEvent(event: Event): boolean; removeEventListener(type: string, listener?: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void; } ``` 以上这些类型都是内置的TypeScript类型，可以直接使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值