P1 : javascript和HTML的交互是通过事件实现的。
P2 : 事件即文件或者浏览器窗口发生交互的瞬间
P3：可以用侦听器（处理程序）来预定事件，当事件发生时执行特定的事件，这种在传统软件工程中被称为观察者模式。
P4：DOM2级规范标准化了DOM事件，IE8是最后一个使用其专有事件系统的浏览器
一、事件流
事件流：描述的是页面接收事件的顺序。
（1）IE：IE的事件流是事件冒泡流。
现在的浏览器都支持冒泡，从最具体的元素接收，沿着DOM树一直向上冒泡，直到传播到window对象。
（2）Netscape：Netscape的事件流是捕获流。
从最不具体的节点document开始，一直向下到具体的节点。
注意：
a、尽管“DOM2级规范”规定捕获从document开始，但是这些浏览器都是熊window对象开始捕获事件。
b、兼容：由于老版本浏览器不支持捕获，所以大多数人使用冒泡。
DOM事件流
DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
注意：
a、捕获阶段不会接收到事件，即捕获阶段在目标几点前结束
b、下一阶段就是“处于目标阶段”，该阶段处理事件，且被认为时事件冒泡的一部分
c、然后，冒泡阶段发生，事件又会被传回文档。
d、但是在IE9、safari、chrom和Opera9.5以上高版本的浏览器中，在捕获阶段也可以触发事件，因此可以控制不不同的阶段操作事件。
事件处理程序
事件即用户或者浏览器的某种行为。如click、moseover、load等，是事件的名称。响应事件的函数称为事件处理程序（事件侦听器），以“on”开头。
事件处理程序的方式：
示例：<button id="myBtn">点击<button>，点击button弹出“我被点击了”。
（1）HTML事件处理程序
<button id="myBtn" onClick="alert('我被点击了！')">点击<button>
（2）DOM0级事件处理程序
var myBtn = document.getElementById('myBtn')
myBtn.onClick = function(){ alert('我被点击了！')} //添加事件
myBtn.onClick = null //移除事件
注：
a、this是依附的元素；
（3）DOM2级事件处理程序
var myBtn = document.getElementById('myBtn')；
var handler = function(){ alert('我被点击了！')}
myBtn.addEvevtListener ('click'，handler，false) ；//添加事件
myBtn.removeEvevtListener ('click'，handler，false) ； //移除事件
注：
a、this是依附的元素；
b、第三个参数为false则冒泡阶段触发事件，为true则捕获阶段触发事件。
c、可以多次绑定事件，顺序执行
（4）IE事件处理程序
var myBtn = document.getElementById('myBtn')；
var handler = function(){ alert('我被点击了！')}
myBtn.attachEvent ('onclick'，handler) ；//添加事件
myBtn.detachEvent('onclick'，handler) ； //移除事件
注：
a、this指window
b、默认冒泡触发事件
c、可以多次绑定事件，执行与绑定顺序相反
（5）跨浏览器的事件处理程序
事件对象
事件处理程序触发时，会生成一个事件对象evevt，该对象有属性和方法。所有浏览器都支持event对象，但是支持的方式不同。
（1）DOM中的事件对象
简单说一下最常用到的preventDefault（）和stopProgation（）。
preventDefault()：取消事件的默认行为，例如在一个link标签上添加click事件，因为link有自己的默认行为，点击时页面会跳转到src指定的路径，故取消其默认的行为。
stopProgation() ：取消事件的进一步捕获或者冒泡。当一个button的父元素也绑定click事件，则在点击button后，由于向上冒泡，父元素的事件也会被触发，故在button的事件处理函数中需要添加该方法。
（2）IE中的事件对象
在IE中事件处理程序的方式不同，决定了获取event的方式不同，且它的属性和方法与DOM中事件对象的属性和方法有差异。
简单说一下cancleBubble（布尔值默认false）和returnValue（布尔默认false）
cancleBubble（）：取消冒泡则：cancleBubble = true
returnValue（）：取消默认行为：returnValue = true
a、DOM0级方法添加事件处理程序，event是window的一个属性，故window.event
b、attchEvevt（）可以直接获取event，也可同DOM0级，为了简=简单直接获取。
简
（3）跨浏览器的事件对象
var EventUtil = {
addHandle:function(elemnt, type, handler){ .... },
getEvent: function(event){ return event ?event :window.event },
getTarget: function(event) { return event.target || event.srcElement }
preventDefault:function(event ){ },
stopPropagation: function(event){ .. }
}
事件类型
DOM3级事件规定了以下几类事件：
a、UI事件：用户与页面上的元素发生交互时触发
b、焦点事件：某元素获取或失去焦点
c、鼠标事件：用户通过鼠标在页面执行操作时触发
d、滚轮事件：鼠标滚轮时触发
e、文本事件：在文档中输入文本时触发
f、键盘事件
g、合成事件：IME（Input Method Editor输入法编辑器）输入字符时触发
除了以上几种，H5也定义了一组事件。
DOM3级事件是在DOM2级的基础上重新定义了这些事件，也添加了一些新的事件。IE9以上支持DOM3。
网友评论