JavaScript事件总结（最详细！）：事件监听器、event事件对象、事件分类、事件默认行为
概念：
事件使用addEventListener()或将事件监听器分配给该接口的oneventname属性来监听这些事件。事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分，可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口
每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。
事件的模式
内联模式
<div onclick='方法名()'></div>
脚本模式
document.queryseletor('div').onclick = function(){
//操作
} //也会被解析为内联
内联里面调用的方法的this会指向window（传递this），脚本模式的this会指向当前的调用者
addEventListener()和removeEventListener()
在addEventListener() 函数中，可传入两个参数——事件名称，回应事件的函数的代码。
btn.addEventListener('click', function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
});
removeEventListener()，删除使用 EventTarget.addEventListener() 方法添加的事件
参数：
type：一个字符串，表示需要移除的事件类型，如 "click"。
listener：需要从目标事件移除的 EventListener 函数。
options 可选：一个指定事件侦听器特征的可选对象。
useCapture 可选：指定需要移除的 EventListener 函数是否为捕获监听器。如果无此参数，默认值为 false。如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，这两次事件需要分别移除。两者不会互相干扰。移除捕获监听器不会影响非捕获版本的相同监听器，反之亦然。
btn.removeEventListener('click', bgChange);
在这个简单的、小型的项目中可能不是很有用，但是在大型的、复杂的项目中就非常有用了，可以非常高效地清除不用的事件处理器，另外在其他的一些场景中也非常有效——比如需要在不同环境下运行不同的事件处理器，只需要恰当地删除或者添加事件处理器即可。
还可以给同一个监听器注册多个处理器
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);
当元素被点击时两个函数都会工作，但是事件只触发了一次
- 就是当你触发了一个事件以后，对该事件的一些描述信息
例如：
- 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
- 你触发一个键盘事件的时候，你按的是哪个按钮
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象
浏览器给了我们一个黑盒子，叫做window.event，就是对事件信息的所有描述
比如点击事件
- 你点在了 0，0 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- 你点在了 10, 10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
如何获取事件对象？
执行下面的代码：
<body>
<div>点击</div>
<script>
let div = document.querySelector('div');
div.onclick = function () {
console.log(arguments);
};
</script>
</body>
结果为：
打印arguments[0]结果为：
我们发现以下规律：
-
-
因为arguments[0] 是获取第一个参数，那么我在处理函数里写一个参数那么这个参数就是对应的arguments[0]
-
在IE低版本里面这个东西我们要通过window.event才能获得，但是在高版本IE和Chrome里面和通过给事件处理函数一个参数那么这个参数就是对应的arguments[0]
所以我们以后在每一个事件里面，想获取事件对象的时候，都用兼容写法
div.onclick = function (e) { e = e || window.event; }
event事件对象身上的属性
一、事件触发的相关属性
1.type 返回对应的事件类型
<body>
<div></div>
<script>
let div = document.querySelector('div');
div.onclick = function (e) {
e = e || window.event;
console.log(e.type); //click
};
div.onmousemove = function (e) {
e = e || window.event;
console.log(e.type); //mousemove
};
</script>
</body>
<body>
<div>
<button>点击</button>
</div>
<script>
let div = document.querySelector('div');
div.onclick = function (e) {
e = e || window.event;
console.log(e.target);
console.log(e.currentTarget);
};
</script>
</body>
3.bubbles 事件是否冒泡
pageX 得到鼠标在页面上的x坐标 （包含不可视区域）
pageY 得到鼠标在页面上的y坐标 （包含不可视区域）
3. clientX与clientY
clientX 鼠标的坐标距窗口可视区水平方向元素的距离
clientY 鼠标的坐标距窗口可视区垂直方向元素的距离
4. screenX与screenY
screenX 鼠标的坐标距电脑屏幕水平方向的距离
screenY 鼠标的坐标距电脑屏幕垂直方向的距离
5. layerX与layerY
layerX 默认是得到鼠标基于页面的x坐标 当你添加定位以后他是基于定位元素的坐标
layerY 默认是得到鼠标基于页面的y坐标 当你添加定位以后他是基于定位元素的坐标
6. x与y
clientX 鼠标的坐标距窗口可视区水平方向元素的距离
clientY 鼠标的坐标距窗口可视区垂直方向元素的距离
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标，event.X也一样。但是如果设置事件对象的定位属性值为relative，event.clientX不变，而event.X返回事件对象的相对于本体的坐标。
三、按键的相关属性
1. altKey 是否按alt键
2. ctrlKey 是否按ctrl键
3. shiftKey 是否按shift键
4.key 属性 （当前按下的键的名称）
5.keycode 属性 （获取当前按下键大写的ascii码）
6.charCode 属性（字符键 keypress事件触发 ascii码）
事件流：
什么是js事件流？
事件流是描述的是页面中事件的执行流程。
微软（IE）和网景（Netscape）开发团队提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。
后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。
事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
接下来就是介绍这两种事件流概念
事件冒泡
事件冒泡就是从目标事件开始，把事件一点一点像父元素传递，事件从里到外逐个执行
阻止事件冒泡
1、stopImmediatePropagation方法：阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发
2、stopPropagation方法：阻止事件冒泡
3、e.cancelBubble = true：属性设置（现在虽然都可以用 但是未来可能会废弃）
兼容写法：
e.stopPropagation?e.stopPropagation():e.cancelBubble = true
事件捕获
事件捕获就是从父元素流向目标元素，事件从外到里逐个执行
事件默认行为
比如：
1、点击a标签，网页会自动跳转到相应的网页；
2、鼠标右击时会出现右键菜单栏；
3、滚动鼠标滚轮时，网页会随之进行滑动；
4、在网页中提交form表单时，浏览器会向服务器提交数据并刷新网页；
5、鼠标右键会出现一个菜单栏
等等......
有些时候我们不需要这些行为的产生 那么我们就需要阻止默认行为
阻止事件默认行为的方式
e.preventDefault()方法
e.returnValue = false，ie的兼容
return false，直接结束对应的操作
兼容写法：
e.preventDefault?e.preventDefault():e.returnValue = false
样式获取
style属性 只能获取标签内容style属性里面存在的一些样式
如果你需要获取对应的全局所有地方设置样式 我们就需要采用一些方法
getComputedStyle 方法（属于window的方法）
window.getComputedStyle(元素对象,null) //返回给你的是一个样式对象
ie兼容
element.currentStyle //返回给你一个样式对象
兼容封装
function getStyle(element,attr){
var style = window.getComputedStyle?window.getComputedStyle(element):element.currentStyle
return style[attr]
}
事件分类：
键盘事件
获取按下的键值：event.key
获取按下的键码值：event.keyCode
keydown
按下某个键时触发。
keypress
当按下字符键时触发。已弃用
keyup
释放键时触发。
鼠标事件
click
当在元素上按下并释放鼠标的左键时触发（单击）。
contextmenu
在元素中用户右击鼠标时触发并打开上下文菜单（鼠标右键点击）
dblclick
当在单个元素上单击两次指点设备按钮（例如，鼠标的主按钮）时触发（双击）。
也可通过ondblclick属性获得。
auxclick
当在元素上按下并释放除左键以外的任何鼠标按钮时触发（除左键以外单击）。
mousedown
在元素上按下鼠标的按钮时触发（鼠标按下，左键右键均触发）。
mouseup
在元素上释放指针设备按钮时触发（鼠标弹起，左键右键均触发）。
mouseenter
当鼠标移动到附加了侦听器的元素上时触发（鼠标移入，只有自己可以触发）。
mouseleave
当鼠标的指针移出附有侦听器的元素时触发（鼠标移出，只有自己可以触发）。
mousemove
当鼠标在元素上移动时触发（鼠标移动）。
mouseover
当鼠标移动到侦听器所连接的元素或其子元素之一时触发（鼠标移入，自己和子元素都可以触发）。
mouseout
当鼠标移离侦听器所连接的元素或其子元素之一时触发（鼠标移出，自己和子元素都可以触发）。
wheel
当用户在鼠标上旋转滚轮按钮时触发（鼠标滚轮事件）。
触摸事件
触摸事件与鼠标事件相比有两个不同点：
1)鼠标光标只有一个，而触摸点可能有很多；2)鼠标光标可以悬停，而触摸点则不行。
touchstart
用户将某个触摸点置于触摸界面之上
touchmove
用户在触摸界面上移动触摸点
touchcancel
当一个或多个接触点以特定于实现的方式中断时触发（例如，创建了太多接触点）。
touchend
当从触摸表面移除一个或多个触摸点时触发。
焦点事件
blur
当元素失去焦点时触发。
也可通过onblur属性获得。
focus
当元素获得焦点时触发。
也可通过onfocus属性获得
focusin
当元素即将获得焦点时触发。
focusout
当元素即将失去焦点时触发。
HTML事件
close 关闭
change 输入框的value值发送表示
select 只有输入框才能触发 （选择里面的内容）
focus 获取焦点
blur 失去焦点
reset 重置
submit 提交
浏览器事件
load
页面全部资源加载完毕
(写外部js时将代码写在window.onload=function(){}中)
scroll
浏览器滚动的时候触发
resize
浏览器窗口改变事件
error
当资源加载失败或无法使用时触发。例如，如果脚本执行错误或图像无法找到或无效。
支持该事件的 HTML 标签：<img>, <object>, <style>
支持该事件的 JavaScript 对象：window, image
select
选择某些文本时被触发。
剪贴板事件
copy
当用户通过浏览器的用户界面启动复制操作时触发。
cut
当用户通过浏览器的用户界面启动剪切操作时触发。
paste
当用户通过浏览器的用户界面启动粘贴操作时触发。
也可通过onpaste属性获得。
构成事件
compositionend
当文本合成系统（例如输入法编辑器）完成或取消当前合成会话时触发。
compositionstart
当文本合成系统（如输入法编辑器）启动新的合成会话时触发。
compositionupdate
在由文本合成系统（如输入法编辑器）控制的文本合成会话的上下文中接收到新字符时触发。
全屏事件
fullscreenchange
Element当它进入或退出全屏模式时触发。
fullscreenerror
如果在尝试将其切换到或退出全屏模式Element时发生错误，则发送给它。 也可通过属性获得。
