JavaScript入门系列目录
- JavaScript入门①-基础知识筑基
- JavaScript入门②-函数(1)基础{浅出}
- JavaScript入门③-函数(2)原理{深入}执行上下文
- JavaScript入门④-万物皆对象:Object
- JavaScript入门⑤-欲罢不能的对象、原型与继承
- JavaScript入门⑥-WEB浏览器API
- JavaScript入门⑦-DOM操作大全
- JavaScript入门⑧-事件总结大全
- JavaScript入门⑨-异步编程●异世界之旅
- JavaScript入门⑩-ES6归纳总结
01、事件基础
1.1、事件简介
事件（Event）是JavaScript的心脏，触发各种交互，让网页动起来。事件是浏览器网页可以监测到的行为，如页面加载、鼠标点击、键盘按键等。在这些事件中可以自定义事件处理程序，用于实现各种业务需求。
事件对象的继承关系：
常见的事件类型、事件如下：
| ⚡鼠标事件(event) | |
|---|---|
| click(event) | 点击触发，通常是鼠标左键在一个元素上被按下并放开时 |
| dblclick | 双击触发事件 |
| contextmenu | 鼠标右键点击触发 |
| mousedown、mouseup | 鼠标按下、弹起时触发 |
| mousemove | 鼠标在元素上移动时触发 |
| onmouseover、mouseout | 鼠标移入、移出元素区域时触发 |
| mouseenter、mouseleave | 鼠标移入、移出元素区域时触发，与上面不同的是不会冒泡 |
| dragstart、dragend | 拖放事件（drag/dræɡ/拖） |
| ⚡键盘事件(event) | |
| keydown、keyup | 键盘按键按下、松开时触发 |
| ⚡表单事件(event) | |
| blur(event)、focusout() | 元素失去焦点，blur不会冒泡 （blue /blɜːr/ 模糊 /不乐/） |
| focus、focusin | 元素获取焦点时触发，focus不会冒泡 |
| from.submit | 提交表单form时触发，可用于表单校验 |
| change | 值发生变化时触发，文本框是在值变化且失去焦点是才触发 |
| input | 输入值改变时触发，event.preventDefault()无法阻止，因为已经改变了 |
| ⚡Document 事件(event) | 文档生命周期：DOMContentLoaded ➡️ load ➡️ beforeunload ➡️ unload |
| doc.DOMContentLoaded | 已加载 HTML并构建好DOM树，外部资源（image、css）可能尚未加载完成 - 如果遇到 <script>标签，会执行（包括外部的资源）然后才继续后面的DOM加载，要注意！async、defer标记的除外（只支持外部js资源） |
| window.load | 文档完全加载完成，包括图片、样式都准备好了。可用于window、element |
| window.beforeunload | 当用户正在离开页面时，不可取消，好像也不能干什么。 |
| window.unload | 用户几乎已经离开了，同上 |
| doc.readystatechange | 文档状态变化时触发，可跟踪文档加载状态readyState |
| onerror | 加载出现错误，用于元素 |
| scroll | 滑动条滚动事件，具有滚动的视图元素。用于window、element |
| ⚡ClipboardEvent事件 | 事件参数对象clipboardData由于安全限制，方法无法使用 |
| cut，copy，paste | 剪切、拷贝、粘贴时触发 |
| e.clipboardData | 保存了一个DataTransfer对象，用于存放数据，该对象也用于拖放 |
| ⚡CSS事件(event) | |
| transitionend | 一个元素 CSS 动画完成时ele.addEventListener("transitionend", func) |
1.2、事件的绑定
① HTML事件：HTML中绑定（调用）事件处理程序，<button onclick="func(event);func2()">button</button>，注意加括号()。
② JS绑定事件（DOM-0级事件）：button.onclick = function() {}，和HTML绑定一样，只能绑定一个事件处理程序。不能用setAttribute设置事件，因为设置的是字符串值。
③ 注册事件（DOM-2级事件）：
- ele.addEventListener(event,func[, options]) ：注册事件， 标签：触发,元素,入门,JavaScript,冒泡,addEventListener,大全,event,事件 From： https://www.cnblogs.com/anding/p/16890365.html