JavaScript事件（上）-优快云博客

本文深入探讨了事件绑定格式、事件对象属性，特别是鼠标事件中button属性的作用，以及如何通过clientX, clientY, screenX, screenY, pageX, pageY等属性获取不同坐标系下的鼠标位置。同时，讲解了offsetLeft和offsetTop属性用于获取元素相对位置的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件类型

事件绑定格式：元素节点.on + 事件类型 = function
在这里插入图片描述

事件对象的属性

button属性 IE下不兼容

**作用：识别你当前按下鼠标上的哪个键**

在这里插入图片描述

鼠标事件(可视区域及屏幕坐标)

在这里插入图片描述
【注】都是获取鼠标坐标的，但是原点不同

可视区及屏幕坐标
事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区左边，另一组是屏幕坐标。

clientX clientY 原点:整个窗口可视区域的左上角

screenX screenY 原点：整个电脑屏幕的左上角

pageX pageY 原点：整个页面/文档的左上角（滚动距离也算）

以前未记住的知识点：
event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

    document.onclick=function(evt) {
        alert(evt.clientX +','+evt.clientY);
        alert(evt.screenX+','+evt.screenY);
    };

补充 offsetLeft 和 offsetTop
【注】以上两种方法只能获取数值，不带px（单位）

offsetLeft
可以通过offsetLeft获取元素距左边的距离
offsetTop
可以通过offsetTop获取元素距上面的距离