JavaScript事件机制
概念
用户的一切操作称为一个事件，事件就对应着用户的行为，所以可以通过事件来监听用户的行为。
事件的添加
方式一：
在标签中添加
方式二：
通过DOM元素添加
var btn=document.querySelector("button");
btn.onclick=function (){
console.log("我是通过DOM元素添加的事件！")
}如果用此方法添加了多个事件，则只执行最后一个事件。移除这种方式的事件可以用removeAttribute方式移除，也可以用setAttribute方式将onclick设置为空。
方式三：
使用addEventListener方法
var btn=document.querySelector("button");
btn.addEventListener("click",function(){
console.log("我是通过addEventListener方法添加的事件")
}
)注意：addEventListener参数说明：
第一个参数：表示事件名称，用字符串形式；
第二个参数：表示事件对应的执行函数，可以是一个函数名，也可以是一个匿名函数。
addEventListener可以绑定多个不同的函数，如果要移除这种方式的事件，则需要使用removeEventListener方法移除绑定的事件函数，而且移除的监听函数参数必须和添加监听函数时的参数完全一致，否则无效；移除多个需要一个一个的移除。
如果使用方式二和方式三同时添加事件，那么这个事件将被重复执行，执行顺序是就近原则。
事件的传播
当一个事件发生以后，它会在不同的DOM节点之间传播，这种传播会使得一个事件在多个节点上触发。
1.事件传播的三个阶段
第一阶段：从window对象传导到目标节点，称为“捕获阶段”。
第二阶段：在目标节点上触发，称为“目标阶段”。
第三阶段；从目标节点传导回window，称为“冒泡阶段”。
说明：事件传导的最顶层是window，接着是document>html>body。
2.我们绑定的事件函数，默认会在冒泡阶段触发。
3.addEventListener方法的第三个参数
它的第三个参数表示监听函数在捕获阶段触发还是在冒泡阶段触发，用一个布尔值表示，false表示在冒泡阶段触发，true表示在捕获阶段触发。如果在冒泡阶段和捕获阶段都进行事件的监听，每个祖先级节点都会触发两次，先绑定谁就先执行谁。
事件对象
1.什么是事件对象？
当用户进行了某个行为，而这个行为被绑定成函数事件时，那么这个函数事件内部会发生一个对象（event），这个对象包含了这个被触发的事件的所有相关信息，然后这个对象就被称为事件对象。
获取事件对象
一般一个函数事件的第一个形参就是此函数的事件对象，也可以通过event获取。
2.通过事件对象实现一些常见功能
①通过事件对象阻止事件的默认行为 -------------------> event.preventDefault();
百度var aBtn=document.querySelector("a");
aBtn.onclick=function (){
event.preventDefault();
}
此时点击上面的a标签将不会跳转到百度页面。②通过事件对象阻止冒泡行为 -------------------> event.stopPropagation();
③通过事件对象获取当前坐标
| event.clientX | 所点击位置到可视区域的横轴距离 |
| event.clientY | 所点击位置到可视区域的纵轴距离 |
| event.screenX | 所点击位置到显示屏的横轴距离 |
| event.screenY | 所点击位置到显示屏的纵轴距离 |
| event.offsetX | 所点击位置到所点击元素左上角的横轴距离 |
| event.offsetY | 所点击位置到所点击元素左上角的纵轴距离 |
事件代理
1.事件代理 又称为 事件委托，它是通过事件会在冒泡阶段向上传播到祖先节点，因此可以把后代节点的监听函数胡定义在祖先节点上，由祖先节点的监听函数统一处理多个后代元素的事件。
2.作用与好处：
①减少了事件判定，极大的提高了性能，对于移动端应用尤为友好；
②解决了麻烦，对于后面添加的元素我们原先绑定的事件会无效，这时可以通过事件代理来解决。
3.常见的事件类型
鼠标事件
鼠标左键单击事件 click
鼠标左键双击事件 dblclick
鼠标右击事件 contextmenu
鼠标移入事件：mouseover
鼠标移出事件：mouseout
如果div中有个p标签，然后给div绑定了这两个事件，那么移入到div中会触发移入事件，移除div会触发移除事件，这个不用说。
需要注意的是，当我们移入到div中的子标签p中时，会依次执行移出移入事件。
鼠标移入事件： mouseenter
鼠标移出事件： mouseleave
mouseout事件会冒泡，mouseleave事件不会。
鼠标按下事件 mousedown
鼠标释放事件 mouseup
当我们点击一个按钮时，触发顺序为：
mousedown首先触发，mouseup接着触发，click最后触发。
鼠标持续移动事件mousemove
为了避免性能问题，建议对mousemove事件的监听函数做一些限定，比如限定一段时间内只能运行一次代码。
键盘事件
keydown事件： 键盘按一下事件（如果按着不放会连续触发此事件）
keypress事件：键盘按一下事件（如果按着不放会连续触发此事件）
如果两个事件都给了，那么当绑定元素聚焦后按一下键盘，两个方法都会触发
如果按着不放，那么这两个事件会连续不断的不断触发keydown -> keypress
如果按下按的键是Ctrl、Alt、Shift和Meta等，那么keypress不会被触发，只有keydown会不断的触发
keyup事件：键盘松开事件
如果用户一直不松开键盘，键盘事件就会按照这样的顺序连续触发：keydown -> keypress -> keydown-> keypress -> ... （松开键盘后）-> keyup。
获取当前按下的按键值
基本演示
当用户在按下键盘的过程中（keydown事件和keyup事件）可以通过事件对象的keyCode属性获取当前键盘的值，返回的值是一个数字。可以根据获取的数字做出判断来完成特定的事件函数。
键盘各键对应的数字值
表单事件
表单事件表示的是当HTML的标签内的元素被操作后发生的事件，在HTML中常见的表单标签有（不同的“type”属性支持的事件可能会有区别）、、