🚩🚩🚩先说结论吧：永远不要使用 HTML 事件处理器属性和内联事件处理器，那些已经过时了，使用它们是不好的做法，而是使用addEventListener()方式注册事件。
什么是web事件？
web 事件不属于 JavaScript 语言的核心——它们被定义成内置于浏览器的 API。浏览器环境中定义了形形色色的事件，其中有一些事件，几乎对任何元素都可用，如 click（点击事件）;也有些事件，只在某些情况下有用，如，play 事件只对某些元素(比如video)有效。在浏览器中使用事件，要先注册事件处理器。
注册事件有三种方式
- 内联事件处理器：在HTML标记中直接指定，属性值就是你想在事件发生时运行的 JavaScript 代码
- 事件处理器属性：在HTML标记中直接指定或者在JavaScript代码中使用DOM API动态添加，它比内联事件处理器可以更好地将JavaScript代码与HTML标记分离，使得代码更易于维护和重用
或
- addEventListener()：推荐使用 addEventListener() 来注册事件处理器，这是最强大的方法，在更复杂的程序中，它的扩展性最好
使用事件处理器属性(或内联事件处理器)可能看起来很容易，但它们很快就会变得无法管理和低效。首先，把你的 HTML 和你的 JavaScript 混在一起不是一个好主意，因为它变得难以阅读。其次，事件属性过多，难以维护，如果有100个按钮，你必须在文件中添加 100 个属性。
但是通过addEventListener()很容易为所有按钮添加事件处理器，如下：
const buttons = document.querySelectorAll("button");
for (const button of buttons) {
button.addEventListener("click", bgChange);
}
在html中标签有一类特殊的全局属性，即事件处理器属性有(不建议使用了)：
onabort、onautocomplete、onautocompleteerror、onblur、oncancel、oncanplay、oncanplaythrough、onchange、onclick、onclose、oncontextmenu、oncuechange、ondblclick、ondrag、ondragend、ondragenter、ondragleave、ondragover、ondragstart、ondrop、ondurationchange、onemptied、onended、onerror、onfocus、oninput、oninvalid、onkeydown、onkeypress、onkeyup、onload、onloadeddata、onloadedmetadata、onloadstart、onmousedown、onmouseenter、 onmouseleave、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、onpause、onplay、onplaying、onprogress、onratechange、onreset、onresize、onscroll、onseeked、onseeking、onselect、onshow、onsort、onstalled、onsubmit、onsuspend、ontimeupdate、ontoggle、onvolumechange、onwaiting。
🌲🌲🌲web事件的分类及含义将收录在专栏《浏览器》。
