事件
js中有几种注册事件的方法，分别有什么区别
- 直接将事件注册到元素上
<button onclick="代码">按钮</button>
使用dom元素注册事件，只能注册一个事件
/*
* 先通过queryselect 等获取对应的dom元素
* 然后给对应的dom元素绑定事件
*/
dom.onclick = function() {
console.log("触发点击事件了")
}
3.使用 addEventListener 方法注册事件，优点：注册多个事件
dom.addEventListener("click", function() {
console.log("触发点击事件")
})
dom.addEventListener("input", function() {
console.log("触发input事件")
})
一个完整的事件流程
- 用户点击某个按钮，即触发点击事件。
- 浏览器从顶层 document 元素发出一个事件流。
- 事件流顺着 DOM 逐层向下查找触发事件的目标元素，这就是常说的事件捕获。
- 如果在查找过程中遇到了相同的事件，比如其它元素也绑定点击事件，那么默认不执行，继续往下找。
- 查找到目标元素后，就会执行目标元素所绑定的事件函数，这也就是常说的事件目标阶段 。
- 到这儿整个点击事件还没有完，浏览器会逆向执行该操作，也就是我们所说的事件冒泡。
- 事件冒泡阶段，默认会触发相同的事件，也就是我们刚刚在事件捕获阶段，遇到相同的事件未执行，因为默认在这个冒泡阶段执行。
上面的流程大致就是一个点击事件的执行过程，这中过程也被称作 DOM 的事件模型。其实总结下来主要就三步：事件捕获阶段->事件目标阶段->事件冒泡阶段。
addEventListener说明
第一个参数表示，事件监听的类型，对什么事件发起监听
第二个参数表示，事件的回调函数，触发事件时执行什么回调
第三个参数表示，事件的触发时机（是在捕获时还是冒泡时，默认为冒泡时触发）
什么是事件冒泡和事件捕获
事件捕获就是值从最外层window开始，逐级向内层前进，直到找到目标元素的过程
事件冒泡从到达目标元素开始往外传递，直到最外层的过程
什么是事件委托
事件委托是指，把需要在子元素身上绑定的事件，绑定到父元素身上，就不需要在重复绑定在子元素身上，让父元素担任事件监听的职务
优点
1.可以大量节省内存占用，减少事件注册
2.可以实现当新增子对象时无需再次对其绑定（动态绑定事件）
e.target和e.currentTarget的区别
e.target是指触发事件的元素
e.currentTarget是指绑定事件的元素
input中监听值的变化是在监听什么事件
| 事件名称 | 触发条件 |
|---|---|
| onchange | 会在值变化之后失焦时触发 |
| onfocus | 当input 获取到焦点时触发 |
| onblur | 当input 失去焦点时触发 |
| oninput | 在用户输入之后触发 |
| onkeyup | 在按下键盘按钮松开的时候触发 |
| onkeypress | 在按下按键时触发，不能触发所有按钮（例如alt、ctrl、shift、esc） |
| onkeydown | 会在用户按下键盘按钮时触发 |
