ヤッハロー、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里的内容非常多，所以，我们也可以好好发挥自己的脑洞，充分利用这些东西。