认识事件处理
◼ Web页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：
比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；
浏览器需要搭建一条JavaScript代码和事件之间的桥梁；
当某个事件发生时，让JavaScript可以相应（执行某个函数），所以我们需要针对事件编写处理程序（handler）；
◼ 如何进行事件监听呢？
事件监听方式一：在script中直接监听（很少使用）；
事件监听方式二：DOM属性，通过元素的on来监听事件；
事件监听方式三：通过EventTarget中的addEventListener来监听；
案例:
<!-- 方案一:直接在HTML中编写JavaScript代码 -->
<button onclick="console.log('按钮1发生了点击')">按钮1</button>
<button class="btn2">按钮2</button>
<button class="btn3">按钮3</button>
<script>
var but2El = document.querySelector(".btn2")
var but3El = document.querySelector(".btn3")
// 2.onclick属性
but2El.onclick = function(){
console.log("按钮2发送了点击")
}
// 3.addEventListener
but3El.addEventListener ("click",function(){
console.log("按钮3发送了点击")
})
</script>
事件流
◼ 事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？
我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；
这是因为我们的HTML元素是存在父子元素叠加层级的；
比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的；
事件冒泡和事件捕获
◼ 我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;
◼ 事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）；
◼ 为什么会产生两种不同的处理流呢？
这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题;
但是他们采用了完全相反的事件流来对事件进行了传递；
IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式；
事件捕获的案例
spanEl.addEventListener("click",function(){
console.log("span被点击了")
},true)
divEl.addEventListener("click",function(){
console.log("div被点击了")
},true)
bodyEl.addEventListener("click",function(){
console.log("body被点击了")
},true)
htmlEl.addEventListener("click",function(){
console.log("html被点击了")
},true)
事件冒泡和事件捕获流程
◼ 如果我们都监听，那么会按照如下顺序来执行：
◼ 捕获阶段（Capturing phase）：
事件（从Window）向下走近元素。
◼ 目标阶段（Target phase）：
事件到达目标元素。
◼ 冒泡阶段（Bubbling phase）：
事件从元素上开始冒泡。
◼ 事实上，我们可以通过event对象来获取当前的阶段：
eventPhase
◼ 开发中通常会使用事件冒泡，所以事件捕获了解即可。
事件对象event
◼ 当一个事件发生时，就会有和这个事件相关的很多信息：
比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；
那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象；
该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；
◼ 如何获取这个event对象呢？
event对象会在传入的事件处理（event handler）函数回调时，被系统传入；
我们可以在回调函数中拿到这个event对象
案例:
var divEl = document.querySelector("div")
divEl.onclick = function(event){
console.log("div被点击",event)
}
event的常见的属性和方法
◼ 常见的属性：
type：事件的类型；
target：当前事件发生的元素；
currentTarget：当前处理事件的元素；
eventPhase：事件所处的阶段；
offsetX、offsetY：事件发生在元素内的位置；
clientX、clientY：事件发生在客户端内的位置；
pageX、pageY：事件发生在客户端相对于document的位置；
screenX、screenY：事件发生相对于屏幕的位置；
◼ 常见的方法：
preventDefault：取消事件的默认行为；
stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；
EventTarget类使用
◼ 我们会发现，所有的节点、元素都继承自EventTarget
事实上Window也继承自EventTarget；
◼ 那么这个EventTarget是什么呢？
EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件；
◼ EventTarget常见的方法：
addEventListener：注册某个事件类型以及事件处理函数；
removeEventListener：移除某个事件类型以及事件处理函数；
dispatchEvent：派发某个事件类型到EventTarget上；
案例:
<script>
// eventtarget就可以实现类似于事件总线的效果
window.addEventListener("hdc",function(){
console.log("监听哈哈哈哈")
})
// 派发事件
setTimeout(function(){
window.dispatchEvent(new Event("hdc"))
},5000)
</script>
事件处理中的this
◼ 在函数中，我们也可以通过this来获取当前的发生元素：
var boxEl=document.querySelector(".box")
boxEl.onclick = function(event){
console.log(this)
console.log(event.target)
console.log(event.currentTarget)
console.log(boxEl)
console.log(this === event.target)
}//true
◼ 这是因为在浏览器内部，调用event handler是绑定到当前的target上的
事件委托模式
◼ 事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式–事件委托模式（也是一种设计模式）
◼ 那么这个模式是怎么样的呢？
因为当子元素被点击时，父元素可以通过冒泡可以监听到子元素的点击；
并且可以通过event.target获取到当前监听的元素；
◼ 案例：一个ul中存放多个li，点击某一个li会变成红色
方案一：监听每一个li的点击，并且做出相应；
方案二：在ul中监听点击，并且通过event.target拿到对应的li进行处理；
✓ 因为这种方案并不需要遍历后给每一个li上添加事件监听，所以它更加高效；
统一在ul中监听---委托模式/代理模式
// 统一在ul中监听---委托模式/代理模式
// 方法一:
var ulEl = document.querySelector("ul")
var activeEl = null
ulEl.onclick=function(event){
// console.log(event.target)
// 1. 将之前的active移除
// for (var i = 0 ;i <ulEl.children.length;i++){
// var liEl = ulEl.children[i]
// if(liEl.classList.contains("active")){
// ulEl.children[i].classList.remove("active")
// }
// }
// 方法二:
// var activeEl = ulEl.querySelector(".active")
// activeEl && activeEl.classList.remove("active")
// 方法三 变量记录的方式
if (activeEl){
activeEl.classList.remove("active")
}
// 2.给点击的添加
event.target.classList.toggle("active")
// 记录 最新的active的li
activeEl = event.target
}
常见的事件
◼ 鼠标事件：
click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
contextmenu------在用户点击鼠标右键打开上下文菜单时触发
dblclick --------当用户双击某个对象时调用的事件句柄
mousedown -------鼠标按钮被按下。
mouseup ---------鼠标按键被松开。
mousemove —— 当鼠标移动时。
mouseover ------鼠标移到某元素之上。（支持冒泡）
mouseout --------鼠标从某元素移开。（支持冒泡）
mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
mouseenter 当鼠标指针移动到元素上时触发。（不支持冒泡）
mouseleave 当鼠标指针移出元素时触发。（不支持冒泡）
mouseover和mouseenter的区别
◼ mouseenter和mouseleave
不支持冒泡
进入子元素依然属于在该元素内，没有任何反应
不能做事件委托
◼ mouseover和mouseout
支持冒泡
进入元素的子元素时
✓ 先调用父元素的mouseout
✓ 再调用子元素的mouseover
✓ 因为支持冒泡，所以会将mouseover传递到父元素中；
◼ 键盘事件：
onkeydown --------某个键盘按键被按下。
onkeypress -------某个键盘按键被按下。
onkeyup ----------某个键盘按键被松开。
keydown 和keyup ——当按下和松开一个按键时。
◼ 事件的执行顺序是onkeydown、onkeypress、onkeyup
down事件先发生；
press发生在文本被输入；
up发生在文本输入完成；
◼ 我们可以通过key和code来区分按下的键：
event.code：“按键代码”（"KeyA"，"ArrowLeft" 等），特定于键盘上按键的物理位置。
event.key：字符（"A"，"a" 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）
◼ 表单（form）元素事件：
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
oninput 元素获取用户输入时触发
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
onreset 表单重置时触发
onsubmit 表单提交时触发
◼ Document 事件：
DOMContentLoaded —— 当HTML 的加载和处理均完成，DOM 被完全构建完成时。
◼ CSS 事件：
transitionend —— 当一个 CSS 动画完成时。
resize 事件
window.onresize = function(){
console.log("窗口大小发生改变时")
}
使用事件 当动画结束时
boxEl.ontransitionend = function(){
console.log("动画执行完成")
boxEl.remove()
}
文档加载事件
◼ DOMContentLoaded：浏览器已完全加载 HTML，并构建了DOM 树，但像<img> 和样式表之类的外部资源可能尚未加载完成。
◼ load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。
◼ 事件类型：
https://developer.mozilla.org/zh-CN/docs/Web/Events