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.dispathEvent(event);
load事件的替代方案 P160
1、如果浏览器存在addEventListener()方法,则使用DOMContentLoader事件。
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);