JS 原生事件总结

1. 事件对象 event

首先，事件对象 event 是一个对象，包含着跟事件有关的所有信息，包括触发事件的 dom 以及每种事件的一些特征。当dom操作触发某个事件时，会产生事件对象 event，当事件被触发时产生，事件执行完毕时销毁。
获取鼠标在那个标签上 e.target

2. 事件流

2.1. 事件捕获: 当时事件被触发的时候，系统会从 window 开始依次向下遍历，遍历的过程中，遇到没有触发的相同事件便触发。
(window => document => html => body => 祖先元素 => 父元素 => 目标元素)

2.2 事件触发: 直到找到触发这个事件的元素，触发元素绑定的事件方法

2.3 事件冒泡: 触发目标事件之后，然后会一层一层向上遍历，遍历的过程中，遇到没有触发的相同事件便触发。

直到返回 window 结束这整个过程叫做事件流。

事件捕获和事件冒泡同一事件流只能有一个生效，JS中默认执行事件冒泡 (false)。

阻止事件冒泡

event.stopPropogation();(IE) || window.event.cancelBubble = true; (非IE)
在 Jquery 中可以直接使用 return false；

3. Dom0级与 Dom2级

3.1 Dom 0级
写法： ele.on事件名 = function(){}
特点： js 与 html 完全分离便于封装
缺点: 同一个DOM对象同时间只能绑定一个同事件
也就是说一个 dom对象只能执行一个事件处理函数
如果给这个事件绑定了多个事件处理函数, 则执行最后一个事件处理函数

3.2 Dom 2级(事件监听)
写法：
ele.addEventListener(“事件类型”,事件处理函数,bool)
事件处理函数可以是：匿名函数、命名函数、对象
bool: 布尔值 (只有true 和 false) 不写默认为 false
true：触发事件捕获 false：触发事件冒泡
特点:
1.DOM 2级不会与DOM 0级事件冲突同时存在时两个都执行
2.可以绑定多个事件函数不会起冲突
Dom2级可以删除命名函数事件移除 removeEventListener

4. 常见事件类型：

注意：事件名中没有 on， on是DOM0级的写法

4.1 鼠标事件

单机事件 click
\2. 双击事件 dblclick
\3. 右键事件 contextmenu 默认事件：右击打开默认菜单栏
\4. 移入事件 mouseenter
\5. 移出事件 mouseout mouseover
\6. 移动事件 mouseenter mouseleave
\7. 按下事件 mousedown
\8. 释放事件 mouseup
\9. 滚轮事件 mousewheel e.wheelDelta > 0 向上滑 < 0 向下滑

4.2 键盘事件
\1. 键盘按下事件只要按下就一直触发 keydown 获取键码：e.keyCode
\2. 键盘抬起事件 keyup

4.3 UI事件(窗口事件)
\1. 资源加载完毕 load
\2. 窗口大小发生改变 resize
\3. 窗口滚动条 scroll
\4. 资源加载完毕 error

4.4 表单事件
\1. 获取焦点 focus
\2. 失去焦点 blur
\3. 正在输入 input
\4. 内容发生改变 change

5. 其他：

1.获取鼠标坐标：
\1. 在浏览器的可视窗口的坐标 — e.clientX / e.clientY
\2. 在标签内的坐标 —– e.offsetX / e.offsetY
\3. 在屏幕内的坐标 —– e.screenX / e. screenY
\4. 在文档中内的坐标 – e.pageX / e.pageY

2. 阻止默认事件：