相对于页面你点击的坐标点
pageX 和 pageY
是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点
<style>* { margin: 0; padding: 0;} body { width: 2000px; height: 2000px;} div { width: 300px; height: 300px; padding: 20px; border: 10px solid #333; margin: 20px 0 0 30px;}</style><body> <div></div> <script> var oDiv = document.querySelector('div') // 注册点击事件 oDiv.onclick = function (e) { // 事件对象兼容写法 e = e || window.event console.log(e.pageX) console.log(e.pageY) }</script></body>
根据页面左上角来说
margin-left 是 30
左边框是 10
左右 padding 各是 20
内容区域是 300
pageX : 300 + 20 + 20 + 10 + 30 = 380
margin-top 是 20
上边框是 10
上下 padding 各是 20
内容区域是 300
pageY : 300 + 20 + 20 + 10 + 20 = 270
点击按键信息（了解）
我们的鼠标一般都有两个按键，一个左键一个右键
我们的事件对象里面也有这个信息，确定你点击的是左键还是右键
我们使用 事件对象.button 来获取信息
0 为鼠标左键，2 为鼠标右键
常见的事件（了解）
我们在写页面的时候经常用到的一些事件
大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
不需要都记住，但是大概要知道
浏览器事件
load ：页面全部资源加载完毕
scroll ：浏览器滚动的时候触发
...
鼠标事件
click ：点击事件
dblclick ：双击事件
contextmenu ：右键单击事件
mousedown ：鼠标左键按下事件
mouseup ：鼠标左键抬起事件
mousemove ：鼠标移动
mouseover ：鼠标移入事件
mouseout ：鼠标移出事件
mouseenter ：鼠标移入事件
mouseleave ：鼠标移出事件
...
键盘事件
keyup ：键盘抬起事件
keydown ：键盘按下事件
keypss ：键盘按下再抬起事件
...
表单事件
change : 表单内容改变事件
input : 表单内容输入事件
submit : 表单提交事件
...
触摸事件
touchstart ：触摸开始事件
touchend ：触摸结束事件
touchmove ：触摸移动事件
...
键盘事件
刚才了解了一下鼠标事件，现在来聊聊键盘事件
我们在键盘事件里面最主要的就是要做两个事情
判断点击的是哪个按键
有没有组合按键，shift + a / ctrl + b / ...
我们先要明确一个问题，就是是不是所有元素都可以绑定键盘事件
我们说事件有一个关键的东西是，该事件是由谁来触发的
一个 div 元素在页面上，我怎么能让一个键盘事件触发在 div 上
所以说，我们一般只给能在页面上选中的元素（表单元素） 和 document 来绑定键盘事件
_document.onkeyup = function () { // code.. }oInput.onkeyup = function () { // code.. }
确定按键
我们的键盘上每一个按键都有一个自己独立的编码
我们就是靠这个编码来确定我们按下的是哪个按键的
我们通过 事件对象.keyCode 或者 事件对象.which 来获取
为什么要有两个呢，是因为 FireFox2.0 不支持 keycode 所以要用 whic
document.keyup = function (e) {// 事件对象的兼容写法e = e || window.event// 获取键盘码的兼容写法var keyCode = e.keyCode || e.whichconsole.log(keyCode)}
常见的键盘码（了解）
8：删除键（delete）
9：制表符（tab）
13：回车键（ebter）
16：上档键（shift）
17：ctrl 键
18：alt 键
27：取消键（esc）
32：空格键（space）
...
组合按键
组合案件最主要的就是 alt / shift / ctrl 三个按键
在我点击某一个按键的时候判断一下这三个键有没有按下，有就是组合了，没有就是没有组合
事件对象里面也为我们提供了三个属性
本文地址：网络知识频道 https://www.hkm168.com/jiqiao/927140_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
