这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战
事件
当鼠标光标在浏览器视口中的某个位置，此时我们可以从event对象中找到clienX和clientY属性。这两个属性就是表示鼠标光标在视口中的坐标。如果鼠标光标在页面上的坐标，我们可以通过event对象的pageX和pageY可以获取。这两个鼠标光标在页面上的位置。除了上面两种，还有一种不仅在浏览器中发生也是在整个屏幕上发生的，我们可以通过event对象中的screenX和screenY属性来获取鼠标光标在屏幕上对应的坐标。
let zss = document.getElementById("wrap");
zss.addEventListener("click", (event) => {
console.log(`x: ${event.clientX},y: ${event.clientY}`);
});
如果我们页面没有滚动，我们可以发现pageX和pageY与clientX和clientY的值是一样的。而且键盘上还有一些修饰符。比如shiftKey以及altKey或者ctrlKey和metaKey，这些属性对应的值是Boolean，按下的时候是true，没有按下的时候是false。我们需要注意的是，IE8之前的版本都不支持metaKey。IE中还有一些其他的事件，比如当我们是否按下了左Alt键，可以使用altLeft事件，返回值是Boolean。当我们是否按下了左shift键，可以使用shiftLeft，返回值也是Boolean。当我们是否按下左Ctrl键，我们可以使用ctrlLeft，返回值也是Boolean。这些都是IE支持。
除了以上，我们还有鼠标的滚轮事件。当用户滚动滚轮就会触发mousewheel事件。
document.addEventListener("mousewheel", (event) => {
console.log(event.wheelDelta);
});
以上事件都是对于PC端的，而对于移动端是不支持的。所以移动端我们需要记住这几点。在移动端中mousemove事件也会触发mouseover和mouseout事件。当双击屏幕并滑动时，会导致触发mousewheel和scroll事件。移动端不支持dbclick事件，当我们双击浏览器窗口可以放大，但是没有办法覆盖这个行为。
手机上还有很多触摸事件，例如touchstart表示手指放到屏幕上时触发、touchend表示手指从屏幕上移开时触发、touchmove表示手指在屏幕上连续滑动时触发。当我们把一个手指放在屏幕上，一个手指在屏幕上移动的触发事件用gesturestart表示。如果我们一个手指在屏幕上的位置发生变化时触发事件用gesturechange事件表示。除此还有一些事件委托、模拟键盘和鼠标事件。
键盘中有keydown，keypress和keyup事件，分别表示当用户按下键盘某个键触发、当用户按下键盘某个键产生字符时触发、当用户抬起键盘的某个键时触发。而且键盘的字母都有对应的数字。常见的有字母A用数字65表示、数字7用数字55表示、数字8用数字104表示、Ctrl用数字17表示、Alt用数字18表示、shift用数字16表示、Enter用数字13表示。
