DOM 事件？
?
?? ?就是浏览器检测到某种操作并执行相应事件的过程。
?
事件类型：?
?
?? ?1. 对象事件 ?
?? ? ? ? ? load和unload ?
?? ? ? ? ? ? ? ? ? ?a) ?适用于javascript对象和dom对象
?? ? ? ? ? ? ? ? ? ?b) ?load的涵义 ： ? ? ? 页面或者图片载入成功 ?
?? ? ? ? ? ? ? ? ? ?c) ?window.onload ? 缺陷必须等在页面所有元素加载完成才能执行，如果包含很多图片执行脚本时就会有明显的停顿。使用css引入则不会有这个问题。
?? ? ? ? ? error ?
?? ? ? ? ? ? ? ? ? ?a) ?图片载入失败会执行的函数
?? ? ? ? ? ? ? ? ? ?b) ?和load事件配合使用监听图片载入
?
?? ? ? ? ?示例代码:
var img = document.createElement("img");
addEvent(img,load,function(){alert("ok")});
addEvent(img,error,function(){alert("error")});
img.setAttribute("src",......);
?
?
?? ?2. ?鼠标事件
?? ? ? ? ? ?a) ?mousemove ? 鼠标移动时会一直触发 ?
?? ? ? ? ? ?b) ?mouseover 和 ?mouseout?
?? ? ? ?html结构
<div id="first"> <div id="second"></div> </div>
?? ? ? 对于这种结构如果都注册了mouseover和mouseout事件就会发生问题， 如果鼠标从first移动到second就会触发first的mouseout事件但实际second还是在first中的。
?
?? ? ? ? ? ? c) ??mousedown ? 鼠标单击是也会触发move
?? ? ? ? ? ? d) ? 如果在mousedown和mouseup事件之间移动了鼠标则不会触发click事件。
?
?? 3. 键盘事件
?
?? ? ? ? ? ? 只是用于document ??
?
?? 4. 表单事件
?
?? ? ? ? ? ? a) ? submit 和 reset
?? ? ? ? ? ? b) ? blur ?和 focus
?? ? ? ? ? ? c) ? ?change ?适用于 select ?input ?textarea等
?
?? 5. DOM事件 ?
?
?? ? ? ? ? ? ie不支持
?
事件流和事件监听器
?
?? ? 两个阶段：冒泡阶段和捕获阶段
?
?? ? 三种模型
?
?? ? ? ? ? ? ?IE浏览器： 采用的事件流是冒泡阶段
?
?? ? ? ? ? ? ?Netscape： 采用的是捕获阶段
?
?? ? ? ? ? ? ?W3C标准： 为了屏蔽差异将两个阶段结合起来 先执行捕获阶段，在执行冒泡阶段。
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用户在事件注册时可以 ?通过false选择捕获阶段
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?通过true选择冒泡阶段
?
?? ? 阻止默认事件:
?? ? ? ? ?javascript代码
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
?
?? ? 阻止事件冒泡：
?? ? ? ??javascript代码
if(event.stopPropagation){
event.stopPropagation(); //W3C标准
}else{
event.cancelBubble = true; //IE浏览器
}
?
?? ?事件注册：
?
?? ? ? ? ? ?a) ?嵌入的事件注册 ?为标签的属性指定一个函数值
?? ? ? ? ? ? ? ? ? ?例如：
<div onclick="test()">test</div>
?? ? ? ? ? ? ? ? ? ? 好处： 所有的浏览器都支持这种事件注册的方法。
?
?? ? ? ? ? ? ? ? ? ? 缺点： ?
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1. ?不符合W3C的标记与行为分开的准则
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2. ?不能注册多个方法
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3. ?如果要为多个标签注册相同事件 ?会有大量重复代码
?
?? ? ? ? ? b) ? 传统的事件模型 ? 为DOM节点的属性添加一个方法
?? ? ? ? ? ?例如
var div = document.getElementById("test");
div.onclick = function(){} //注册事件
div.onclick = null //注销事件
?? ? ? ? ? ? ? ? ? ? ? ? ?好处： ? ?比起之前的嵌入式注册 将标记和行为进行了分离。
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 也是不针对特定的浏览器
?
?? ? ? ? ? ? ? ? ? ? ? ? ?缺点： ? ? 如果监听器多了 代码会比较混乱 不容易维护
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?没办法指定事件流顺序
?
?? ? ? ? ? c) ? 后来ie提出了一种事件注册的机制
?? ? ? ? ? ? ? ? ?示例代码
element.attachEvent("type",listener);//注册事件
element.detachEvent("type",listener);//注销事件
?
?? ? ? ? ? ? ? ? ? ? ? ? ?好处 ： ?思路清晰 ?可以绑定多个事件
?
?? ? ? ? ? ? ? ? ? ? ? ? ?缺点： ? 这种模型只在ie浏览器下可以使用
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?于标准相比 ie中的listener只是一个引用this指针还是指向定义的环境 大多数是window对象
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 不支持捕获模型
?
?? ? ? ? ? ?d) ?W3C DOM事件模型
?? ? ? ? ? ? ? ? ?示例代码
element.addEventListener("type",listener,boolean); //注册事件
element.removeEventListener("type",listener,boolean); //注销事件
?
?
?? ? ? ? ? ?e) ? 多种模型下的手工模拟事件
?? ? ? ? ? ? ? ? ? ??示例代码
element.onclick() //传统事件中 可以通过直接调用这个方法模拟click 但是没有event对象
element.fireEvent("onclick"); // ie浏览器中 这种方法有event对象
var event = document.createEvent("MouseEvent"); //W3C的的事件模拟
event.initMouseEvent(.......); //具体参数请查阅W3C可以通过event.data设置event的值
element.dirpatchEvent(event);
?
? 事件绑定：
?
? ? ? ? ? W3C中：
addEventListener
? ? ? ? ?IE中：
? ? ? ? ? ? ? ?attachEvent
? ? ? ? ? 二者的不同之处在于对于事件句柄的处理，W3C中事件句柄的执行环境就是绑定的对象，而Ie中执行环境则是window。换句话说，函数中得this指向不同，W3C中指向node，ie中执行window。
?
? ?? 因此需要在ie中进行一个事件转换。
?
?
??访问事件对象
?
?? ? ? ? 每次发生一个事件时都会有一个事件对象，在W3C 事件模型中事件监听器取得一个表示事件本身的对象参数而在ie中则会将事件放入window.event属性中。
?
?? ? ? ? ?W3C事件的属性：
?? ? ? ? ? ? ? ? ? ?currentTarget ?表示当前事件目标
?? ? ? ? ? ? ? ? ? ?target ? ? ? ? ? ? ?最早调用事件的目标
?? ? ? ? ? ? ? ? ? ?type ? ? ? ? ? ? ??
?? ? ? ? ?MouseEvent ? ?
?? ? ? ? ? ? ? ? ? ?button属性 ? ? ? ?
?? ? ? ? ? ? ? ? ? ?获取鼠标位置
?? ? ? ? ? ? ? ? ? ? ? ? ? ?clientY 指的是鼠标相对浏览器顶端的距离
?? ? ? ? ? ? ? ? ? ? ? ? ? ?pageY 只能在safari中使用 鼠标相对于文档顶端的距离
?