ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天不找对象，不面向对象，今天面向消息讲一讲和event有关的知识。
方法1—直接注册
首先，需要注册一个监听方法
let a = document.getElementsByTagName('body')[0]
a.onmousemove = (e) => {
console.log(e);
}
这样直接监听获取全部的鼠标信息,然后开始获取我们想要的东西
let a = document.getElementsByTagName('body')[0]
a.onmousemove = (e) => {
// 每个箭头事件函数的第一个参数自带的event对象
console.log(e.clientX, e.clientY);
}
这样就可以直接通过event对象获取当前的鼠标坐标的信息。
如果您想要只在某个区域内开启监听，这个也是可以的。
<div style="width: 400px;height: 300px;border: 1px solid #000000;" class="demo">测试界面</div>
let a = document.getElementsByClassName('demo')[0]
a.onmousemove = (e) => {
console.log(e.clientX, e.clientY);
}
如果您不需要监听了，可以马上移除它，避免占用过多的内存
a.onmousemove = null
方法2—使用addEventListener
<div style="width: 400px;height: 300px;border: 1px solid #000000;" class="demo">测试界面</div>
let a = document.getElementsByClassName('demo')[0]
a.addEventListener('mousemove', (e) => {
console.log(e.clientX, e.clientY)
})
如果不需要触发了，也记得要去注销它。但是,如果需要成功注销的话，就需要像下面这样注册一个事件才行。
let a = document.getElementsByClassName('demo')[0]
let eve = (e) => {
console.log(e.clientX, e.clientY)
}
a.addEventListener('mousemove', eve) // 第二个传入一个存入function的参数
setTimeout(() => {
a.removeEventListener('mousemove', eve)
// 可能有已经注册了多个mousemove事件，但是只能注销当前这个，如果还是使用上面的匿名函数的形式的话，就无法在删除事件的时候找到事件的储存地址，也无法成功删除。
}, 1000)
方法3—使用HTML标签直接注册
<div style="width: 400px;height: 300px;border: 1px solid #000000;" class="demo" onmousemove="getPlace(event)">测试界面</div>
<!-- 记得在标签处传入event参数,获取每一次鼠标移动之后的当前所有的信息 -->
function getPlace(e) {
console.log(e.clientX, e.clientY)
}
如果想要删除事件就直接在DOM删掉就行了
document.getElementsByClassName('demo')[0].removeAttribute('onmousemove')
总结
这些只是event对象中的很少一部分知识，有兴趣的可以在触发一些消息事件之后再打印一下 e
console.log(e) 看一下里面到底有什么东西，我们可以利用里面的内容可以做什么，由于event里的内容非常多，所以，我们也可以好好发挥自己的脑洞，充分利用这些东西。