事件概念
事件是用户在网页中的行为
语法：
标签.on类型=函数
标签：
获取到的标签
document
window
body
事件类型：
鼠标类：
单击 -- click
双击 -- dblclick
移入 -- mouseover
-- mouseenter
移出 -- mouseout
-- mouseleave
移动 -- mousemove
按下 -- mousedown
弹起 -- mouseup
滚轮 -- mousewheel
右击 -- contextmenu
键盘类：
键盘按住 -- keydown
-- keypress
键盘弹起 -- keyup
表单类：
失去焦点 -- blur
获取焦点 -- focus
改变 -- change
表单提交 -- submit
文本框内容变化 -- input
window:
滚动条 -- scroll
加载 -- load
窗口大小 -- resize
函数：
匿名函数：function (){}
函数名称：function fn(){}
事件流
概念：事件从开始触发到执行结束的整个过程
3个阶段：
捕获阶段 -- 由外向内找目标元素的过程
目标阶段 -- 找到目标元素执行他的过程
冒泡阶段 -- 由内向外离开目标元素的过程 --> 祖宗标签的同类型事件会在冒泡阶段执行
事件侦听器
概念：是另一种绑定事件的方式
语法：
标签.addEventListener(事件类型，函数，这个事件是否在后代表标签的捕获阶段执行-是一个布尔值，不写默认为false)
box.addEventListener('click',function fn(){},false)
解绑：标签.on类型 绑定的事件 -- 标签.on类型=null
div.onclick = function (){
div.onclick = null
}
事件侦听器绑定的事件 -- 标签.removeEventListener(事件类型，对应的函数)
box.addEventListener('click',function fn(){},false)
box.removeEventListener('click',function fn(){})
注意：
解绑的类型和绑定的类型要保持一致
解绑的函数和绑定的函数必须是同一个
事件对象
概念: 事件中用于记录当前事件所有详细信息的对象
获取：
事件函数的参数1
事件函数中用window.event
作用:
获取鼠标位置：
相对于浏览器可视窗口：
e.clientX
e.clientY
相对于当前标签：
e.offsetX
e.offsetY
相当于当前文档：
e.pageX
e.pageY
获取键盘按键码：
e.keyCode:
字母是大写的Ascii码
字母是小写的Ascii码
回车 -- 13
空格 -- 32
左上右下 -- 37 38 39 40
组合键：
e.shiftKey
e.ctrlKey
e.altKey
获取事件类型 -- e.type
获取鼠标按键码 -- e.button
阻止事件冒泡 -- e.stopPropagation
阻止默认行为
e.prevntDefault()
在事件函数末尾 return false
获取精准的目标元素
e.target --> 实现事件委托：
将子标签事件给父标签绑定，在事件函数中，通过判断精准的目标元素是否是子标签
原理：利用了事件冒泡
好处：
提高绑定效率
动态添加子标签也可以具备事件
