EVENT（上）
之前我们简单的了解过一些事件，比如 onclick / onload / onscroll / ...
今天开始，我们详细的学习一些 事件
什么是事件
一个事件由什么东西组成
触发谁的事件：事件源
触发什么事件：事件类型
触发以后做什么：事件处理函数
var oDiv = document.querySelector('div')oDiv.onclick = function () {}// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv// 触发什么事件 => onclick => 这个事件类型就是 click// 触发之后做什么 => function () {} => 这个事件的处理函数
我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面
var oDiv = document.querySelector('div')oDiv.onclick = function () {console.log('你点击了 div')}
当我们点击 div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数
事件对象
什么是事件对象？
就是当你触发了一个事件以后，对该事件的一些描述信息
例如：
你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
你触发一个键盘事件的时候，你按的是哪个按钮
...
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子，叫做 window.event，就是对事件信息的所有描述
比如点击事件
你点在了 0，0 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
你点在了 10, 10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
...
oDiv.onclick = function () {console.log(window.event.X轴坐标点信息)console.log(window.event.Y轴坐标点信息)}
这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题
在 IE低版本 里面这个东西好用，但是在 高版本IE 和 Chrome 里面不好使了
我们就得用另一种方式来获取 事件对象
在每一个事件处理函数的行参位置，默认第一个就是 事件对象
oDiv.onclick = function (e) {// e 就是和 IE 的 window.event 一样的东西console.log(e.X轴坐标点信息)console.log(e.Y轴坐标点信息)}
综上所述，我们以后在每一个事件里面，想获取事件对象的时候，都用兼容写法
oDiv.onclick = function (e) {e = e || window.eventconsole.log(e.X轴坐标点信息)console.log(e.Y轴坐标点信息)}
点击事件的光标坐标点获取
刚才即然说了，可以获取到坐标点，那么接下来我们就学习一下怎么获取坐标点
我们的每一个点击事件的坐标点都不是一对，因为要有一个相对的坐标系
例如：
相对事件源（你点击的元素）
相对页面
相对浏览器窗口
...
因为都不一样，所以我们获取的 事件对象 里面的属性也不一样
相对于你点击的元素来说
offsetX 和 offsetY
是相对于你点击的元素的边框内侧开始计算
<style>* { margin: 0; padding: 0;} 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.offsetX) console.log(e.offsetY) }</script></body>
相对于浏览器窗口你点击的坐标点
clientX 和 clientY
是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标
<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.clientX) console.log(e.clientY) }</script></body>
本文地址：网络知识频道 https://www.hkm168.com/jiqiao/927140.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
