事件的概述：事件相当于一个（执行者执行 -- 观察者观察 -- 处理函数执行）的流程，这个流程称为事件。是一个异步机制。
事件的组成：
1、事件名 （内置的）
2、执行对象 （元素对象）
3、处理函数 （自定义函数）
4、观察者 （js的事件引擎）
在js内书写的事件，他的观察者都是事件引擎。 我们需要关注就是前面的三个内容（事件名、执行对象、处理函数）
事件的声明书写方式：
1、内联模式（在标签内部）
<!-- 内联模式就是在onclick书写中设置对应的代码 -->
<buttononclick="alert('你好')">点我</button>
<buttononclick="fn(1)">点我</button>
<script>
functionfn(arg){
alert('我是函数执行'+arg);
}
</script>
2、脚本模式 （在script中），比较常用
//脚本模式的写法 事件名 执行对象 处理函数
varbtn=document.getElementsByTagName('button')[2]
//执行对象.on+事件名 = 处理函数
btn.onclick=function(){
console.log('你好');
}
functionhandler(){
console.log('处理函数执行了');
}
btn.onclick=handler
内联模式和脚本模式的区别：
1、内联模式里面的函数需要手动调用，而对应的脚本的模式的处理函数自动调用
2、内联模式里面的函数调用的this指向window 对应的脚本模式里面的处理函数的this指向当前的调用者
事件名的分类：
1、鼠标事件（鼠标触发的 mouse）
onclick 单击事件
ondblclick 双击事件
onmousedown 按下
onmouseup 弹起
onmouseenter 移入
onmouseleave 移出
onmouseover 移入
onmouseout 移出
onmousemove 移动
oncontextmenu 右键点击
注意事项：click和对应mousedown和mouseup的执行顺序 （mousedown -- mouseup -- click）
mouseenter(mouseleave)和mouseover(mouseout)的区别: mouseenter 子元素不会触发，mouseover子元素会触发。
2、键盘事件 （键盘触发的 key）
onkeydown 按下
onkeyup 弹起
onkeypress 字符串（除功能键的其他键）
注意事项：
1、执行顺序 ：onkeydown - onkeypress - onkeyup
2、onkeypress 一定会触发 onkeydown
HTML事件 （HTML中自带的一些事件（只能用于专门HTML））
1、window的事件
onload 加载事件
onunload 卸载事件
onclose 关闭窗口的事件
onbeforeprint 打印之前调用的事件
onbeforeunload 卸载之前调用的事件
onscroll 滚动栏发生变化的事件
2、表单的事件
onsubmit 表单提交事件
onreset 表单重置事件
onselect 内容被选中（只针对于输入框和文本域）
onchange 表单的value值发生变化
oninput 可输入的表单标签里面进行输入
onblur 失去焦点
onfocus 获取焦点
3、相关聚焦和失焦的方法
focus 聚焦的方法
blur 失焦的方法
//element也具备 focus() blur()
document.querySelector('input').focus()
setTimeout(function(){
document.querySelector('input').blur()
},3000)
event 事件源对象
event的概述：event 被称为事件源对象，是一个全局的内置对象（属于window），里面包含了一些关于事件执行的相关的属性。
处理函数中Arguments
概述：处理函数也是一个函数，函数就具备一个arguments的属性。argments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments
从上述代码可得到对应的事件执行的处理函数里面会传递一个参数 ，这个参数的类型是一个event。这个处理函数的arguments数组里面只有一个元素。
故而我们可以简写为：
event的常用属性：
1、鼠标坐标的相关属性
screenX 表示鼠标离屏幕的X距离
screenY 表示鼠标离屏幕的Y距离
pageX 表示当前的鼠标离页面的X距离（包含卷起部分）
pageY 表示当前的鼠标离页面的Y距离（包含卷起部分）
clientX 表示鼠标离页面可视区的X距离
clientY 表示鼠标离页面可视区的Y距离
offsetX 表示鼠标离父元素偏移的X距离
offsetY 表示鼠标离父元素偏移的Y距离
2、按钮辅助的相关属性
ctrlKey 是否按下了ctrl键
altKey 是否按下了alt键
shiftKey 是否按下shift键
//辅助的按键属性 返回布尔类型值
console.log(e.ctrlKey);//是否长按ctrl
console.log(e.altKey);//是否长按alt
console.log(e.shiftKey);//是否长按shift
3、鼠标相关的属性
button 按下是那个键
//按下的键是什么 三个值 0 1 2
console.log(e.button);//左键0 中间滚轮1 右键2
4、事件及相关触发的属性
type 当前的事件类型
//事件类型 返回事件名
console.log(e.type);//click
target 表示当前事件的触发对象
//触发者元素
console.log(e.target);
currentTarget 表示加事件的元素
//加事件的元素
console.log(e.currentTarget);
5、键盘相关的属性
key 表示当前按下的键的字符（区分大小写）
keyCode （在keydown里面 不区分大小 全部是大写的ascii码）
code （key+大写的字符）
charCode （在keypress里面才管用 区分大小写 返回对应的ascii码）
window.onkeypress=function(e){
console.log(e.code);//当前的按钮按下键是哪个一个 返回的是一个key+大写字母
console.log(e.keyCode);//当前按下键的大写字母 ascii码
console.log(e.charCode);//当前字符的ascii码 keypress里面
console.log(e.key);//表示当前按下的键 （兼容问题）
}
2、事件委托机制（事件代理）
概述：将对应的事件委托给对应的父元素，然后通过对应的e.target获取实际的触发元素进行操作。
事件委托的运用场景：在一个父元素里面有多个子元素要添加相同的事件的时候。
