2015-03-12——简析DOM2级事件

DOM2级事件

事件的几种类型：
对象事件，鼠标事件，键盘事件，表单事件，W3CDOM事件，以及针对浏览器的事件。

对象事件：
window对象，也是javascript对象。
load 适用于window对象，页面需要的所有图像文件都载入完成才触发。
unload 适用于window对象，页面被关闭之前捕获最后一瞬间的信息。
error 适用于window对象和图像对象。图像一旦设置src属性，就开始载入图像。
abort 在图像完全载入之前，因浏览器停止载入页面导致图像载入失败时触发。通常发生在单击浏览器停止按钮。
resize
scroll 适用于具有overflow:auto;样式的元素。

鼠标移动事件
mousemove 由鼠标下方的对象触发，鼠标按下时触发。
moverover
mouseout

鼠标单击事件
mousedown 不一定和mouseup成对出现，取决于触发时鼠标下方几个元素。
mouseup 不一定和mousedown成对出现，取决于触发时鼠标下方几个元素。
click 鼠标必须保持不动
dbclick

键盘事件
只适用于document对象
keydown
keyup
keypress 紧随着keyup之后触发，表示一个键被按过了。

表单事件
submit
reset
blur 适用于<label><input><select><textarea><button>等表单元素。
focus 适用于<label><input><select><textarea><button>等表单元素。
change 适用于<input><select><textarea>，会在focus事件发生后，当用户在focus和blur事件之间修改元素的值时触发。

W3C DOM事件
三个用户界面事件：
DOMFocusIn 适用于任何元素，不仅仅是表单元素。
DOMFocusOut 适用于任何元素，不仅仅是表单元素。
DOMActive 鼠标或按键激活。
七种变化（Mutation）事件，修改DOM结构时触发。
DOMSubtreeModified 触发于最低公共节点上。
DOMNodeInserted
DOMNodeRemoved
DOMNodeRemovedFromDocument
NodeInsertedIntoDocument
DOMAttrModified
DOMCharacterDataModified

事件流
事件流的传递取决于文档结构，和视觉位置无关。不可能同时单击两个DOM结构上无嵌套关系的元素。
IE 事件冒泡
Netscape 事件捕获
W3C 默认事件冒泡

阻止冒泡：
W3C e.stopPropagation();
IE e.cancelBubble = true;

取消默认动作：
注意：有一些事件不能被取消，如:mousemove,load,unload,select,change...
W3C e.preventDefault();
IE e.returnValue = false;

传统的事件模型
最技术上缺陷：事件侦听器只能是一个单独的函数，且无法指定捕获阶段还是冒泡阶段。
移除侦听器示例：anchor.onclick = null;
手工触发事件示例：anchor.onclick();

MSIE的事件模型
attachEvent('on' + type, callback);
detachEvent('on' + type, callback);
可以对某事件指定多个侦听器，但只能冒泡阶段触发。
手工触发事件示例：node.fireEvent("on" + type);
关于侦听器中的this关键字：
与传统的模型不同，MSIE的模型只是引用而非复制事件侦听器，因此this引用的将是原始的函数（通常位于window对象中），而不是附加到注册事件侦听器的那个对象。

W3C DOM2事件模型
addEventListener
removeEventListenr
对某事件指定多个侦听器，并不能保证执行顺序，要想保证执行顺序，只能注册一个侦听器，然后在其内部按期望的顺序调用多个函数。
手工触发事件需要组合document.createEvent()和dispatchEvent()来手工触发。
示例：
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 0,.....);
node.dispachEvent(event);

load事件的替代方案 P160
1、如果浏览器存在addEventListener()方法，则使用DOMContentLoaded事件。
2、对于Safari，使用用setInterval()定期检查document.readyState === 'loaded or complete'。
3、对于IE，写入一个script标签，添加defer属性，使用script对象的onreadystatechange属性，进行readyState === 'complete'检查。

关于事件侦听器
不能再侦听器中指定自定义参数。（正确与否，取决于浏览器）
W3C模型中，事件侦听器会取得一个表示事件自身的参数。
MSIE模型中，事件侦听器不会取得任何参数。

Event对象继承

DOM2事件规范中的Event对象
事件对象包含着用于控制事件流和目标对象的方法和属性。
Event对象属性：
bubbles 表示事件是否是冒泡阶段的事件。
cancelable 表示事件是否具有可以被取消的默认动作。
currentTarget 表示当前正在处理的事件侦听器所在的事件流中的DOM元素。
target 目标对象
timestamp 用来确定自创建事件的纪元时间算起，经过的毫秒数。
type 包含事件名称。如click
eventPhase 当前事件侦听器所处于事件流的哪个阶段。整数1-3表示，也可以使用Event常量CAPTURING_PHASE,AT_TARGET,BUBBLING_PHASE表示。
Event对象方法：
document.createEvent('Event');
initEvent(eventType, canBubble, cancelable);
preventDefault();
stopPropagation();

DOM2事件规范中的MouseEvent对象
对于鼠标事件，传递到事件侦听器中的事件对象都是MouseEvent对象。
MouseEvent对象属性：
altKey 鼠标事件发生时，是否按住了alt键。
ctrlKey 鼠标事件发生时，是否按住了ctrl键。
shiftKey 鼠标事件发生时，是否按住了shift键。
button 哪个鼠标键被按下的一个整数值，左中右（0,1,2）。MouseEvent常量，MouseEvent.BUTTON_LEFT...
clientX 相对于浏览器窗口
clientY
screenX 相对于桌面屏幕
screenY
relatedTarget MouseEvent对象拥有，该属性值一般情况下，为null。但在mouseover事件中，引用鼠标离开的前一个对象。在mouseout事件中，引用鼠标之前进入的那个对象。

各浏览器兼容问题

访问事件的目标元素（target）
IE中，没有提供target和currentTarget属性，但提供了一个srcElement属性。
Safari中，文本节点会代替包含它的元素成为目标对象。判断条件：node.nodeType === 3

确定单击了那个鼠标按键（button）
MSIE
0 没有按键按下
1 左键
2 右键
3 同时按下左右键
4 中键
5 同时按下左中键
6 同时按下右中键
7 同时按下左中右键

处理鼠标在文档中的位置
Safari pageY
W3C document.documentElement.scrollTop + e.clientY
IE document.body.scrollTop + e.clientY

访问键盘命令
event.keyCode enter 13 左上右下（37,38,39,40） shift 16 ctrl 17
将unicode值转换普通字符：String.formCharCode(event.keyCode);

巴特西

2015-03-12——简析DOM2级事件

最新文章

热门文章