JavaScript事件总结

一. JavaScript事件的含义
-事件就是文档或浏览器中发生的特定交互瞬间
二.JavaScript事件模型
1、原始事件模型
-原始事件模是一种被所有浏览器都支持的事件模型，事件一旦发生，将马上进行处理
-实现原始事件的两种方式

移除监听只要将函数设置为null（btn.οnclick=null；）
-原始事件模型逻辑与显示没有分离，相同事件的监听函数只能绑定一个，无法通过事件的冒泡、委
托等机制完成更多事情，虽然它兼容所有浏览器，但仍不推荐使用
2、DOM2模型（事件流）
-此模型是W3C制定的标准模型，IE6～8之外的浏览器都已遵循这个规范，过程一般为【事件捕获】
→在对象上【处于目标】→【事件冒泡】
-事件捕获：在DOM节点树的某个节点发生了一些操作（例如点击、鼠标移入），便会发送事件出去，
这个事件从Window发出，逐级向下直到触发目标节点，在到达目标节点之前的过程，就是捕获阶段

在这个过程中，事件相应的监听函数是不会被触发的
-处于目标：事件不断的传递直到目标节点的时候，最终在目标节点上触发这个时间，就是目
标阶段。
-事件冒泡：事件开始时由事件发生所在的节点（最具体的元素）接收，逐级向上，到页面元素

所有的事件都会经历事件捕获，但是只有部分事件呼经历冒泡事件

3、IE事件模型
-IE不把对象传入事件处理函数，在任意时刻只会存在一个事件，所以IE把对象作为全局对象window
的一个属性，一旦函数执行结束，便被置为null了
-IE事件模型共有两个过程：
·事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。
·事件冒泡阶段(bubbling phase)。事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
-IE的事件模型已经可以解决原始模型的三个缺点，但其自己的缺点就是兼容性，只有IE系列浏览器
才可以使用。

由于事件模型的差异以及Event对象的不同，为了达到兼容各个浏览器的目的，我们可以增加一个Event Wrapper, 它对各个浏览器应当提供一致的事件操作接口。
三.JavaScript事件对象
·DOM中的事件
bubbles 是否冒泡
cancelable 是否可以取消默认行为
currentTarget 当前处理事件的元素
defaultPrevented
datail 事件的目标
eventPrevented（） 停止捕获和冒泡，阻止事件处理程序
stoplmmedataPropagation（） 取消事件进一步捕获和冒泡
target 事件的目标
trusted true为浏览器生成的，false是程序员js生成的
type 触发事件的类型
view 抽象视图
·IE中的事件
cancelBubble true取消事件冒泡，默认false
returnValue false取消事件行为，默认true
srcElement 事件目标，与 targer类似
type 事件的类型

四.JavaScript事件类型
·UI
load 页面完全加载后，window上触发，也可能是框架、照片、object等对象加载完触发
unload 完全卸载时触发
abort 用户停止下载，如果嵌入的对象没下载完，则触发
error js有错误，在window上触发；或者在框架、照片、object等对象加载完触发
select 用户选择文本字符时，则触发
resize 调整窗口或框架大小时触发
scroll 用户滚动时触发

·焦点事件
blur元素失去焦点时触发，不会冒泡
DOMFocusln 元素获得焦点触发，冒泡
DOMFocusout 失去焦点触发
focusin 获得焦点触发，冒泡
focusout 失去焦点触发

·鼠标事件
clik 单击鼠标按钮
onclick 双击鼠标按钮
mousedown 鼠标按下
mouseenter 鼠标移入元素范围
mouseleave 鼠标移出
mousemove 移动时重复触发
mouseout 移入另一个元素
mouseover 移入边界时触发
mouseup 鼠标抬起触发

·键盘事件
Keydown 按下任意键
Keypress 按下字符键
Keyup 抬起任意键

·滚轮事件
wheelDelta

·几个鼠标坐标位置
客户区坐标：鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置保存在事件对象clientX
和clientY属性中。
页面坐标位置：pageX和pageY这两个属性表示光标在页面中的位置，因此坐标是从页面本身而不是视
口左边或顶边计算的。
五. JavaScript事件委托
-事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。通常给父
元素绑定2020事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把好事件委托给父元素去处理。
-事件委托的好处在于不需要对每一个子元素绑定事件，只需要在父元素上绑定事件，减少了操作DOM节点的次数，从而减少浏览器的重加载，提高代码的性能。