这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战
事件
DOM3中有很多事件类型，我们常用的有很多，例如：当我们在元素获得和失去焦点时触发的时候，可以使用FocusEvent的焦点事件。如果我们使用鼠标在页面上执行某些操作时触发，可以使用MouseEvent的鼠标事件。当我们使用鼠标滚轮时触发，我们可以使用WheelEvent的滚轮事件。当我们向文档中输入文本时触发，我们可以使用InputEvent的输入事件。当我们使用键盘在页面上执行某些操作时触发，我们可以使用KeyboardEvent的键盘事件。
用户操作的一些事件或者这些事件与用户的操作可能无关，例如在window上当页面完全卸载后触发或者当所有窗格都卸载完成后触发可以使用unload事件。当在window上JavaScript报错或者当img标签上无法加载指定图片时，我们可以使用error事件。当在window或者窗口被缩放时触发，我们可以使用resize事件。当用户滚动滚动条或者body标签中包含已加载页面的滚动条，可以使用scroll事件。如果当在window上页面加载完成后触发，可以使用load事件。需要注意的如果根据DOM2 Events，load事件是在document上而不是window上触发，但是现在所有浏览器都在window上实现了load事件。
<img src="test.png" onload="alert('onload')">
let loadImg = document.getElementById("test");
loadImg.addEventListener("load", (event) => { alert(event.target.src); });
我们平时常用到的焦点事件，其中有当元素失去焦点时触发，我们用到的是blur方法，当元素获得焦点时触发，我们使用focus方法。我们平时常用的鼠标和滚轮事件有很多。例如在用户把鼠标光标从元素外部转义到元素内部时，我们使用mouseenter事件。当用户双击鼠标时触发，我们使用dbclick事件。在用户按下任意键触发，我们使用mousedown事件。当用户单击鼠标或者按回车键进行触发，我们使用click事件。当用户将鼠标光标从一个元素移动到另一个元素上触发，我们使用mouseout事件。当用户松开鼠标时触发事件，我们使用mouseup事件。当用户的鼠标在元素上来回反复移动，我们使用mousemove事件。以上所有鼠标事件除了mouseenter和mouseleave之外，都可以冒泡和被取消。需要注意的是如果我们点击click事件之前点击了mousedown，然后又在同一元素上点击了mouseup，那么这两个事件其中一个会取消而且click事件也不会被触发。
