Hi, I’m Adam Lu.

Javascript的事件以及事件处理

看了《Javascript权威指南》，关于事件的部分做了一些笔记：

1.img支持的事件有onabort, onerror, form支持的事件有onreset, onsubmit
2.可以用document.implementation.hasFeature(’Events’, ‘2.0′);来检测浏览器是否支持Event模块
3.事件的模块分为：HTMLEvents如abort, blur, change, error, focus等；MouseEvents如click, mousedown, mousemove, mouseup等；UIEvents如DOMActivate, DOMFocusIn, DOMFocusOut
4.2级DOM API提供的事件Event定义了以下属性：
type - 发生事件的类型
target - 发生事件的节点
currentTarget - 发生当前正在处理的事件的节点
eventPhase - 一个数字，指定了当前所处的事件传播过程的阶段
timeStamp - 一个Date对象，声明了事件何时发生
bubbles - 布尔值，声明该事件是否在文档树中冒泡
cancelable - 布尔值，声明该事件能否具有能用preventDefault()方法取消的默认操作
UIEvent是Event接口的子接口，除了UI接口定义的属性外，UIEvent还定义了两个属性：
view - 发生事件的Window对象
detail - 一个数字，提供事件的额外信息
MouseEvent继承了Event接口和UIEvent接口的所有属性和方法，此外它还定义了下列属性：
button - 一个数字，声明了mousedown, mouseup和click事件中哪个鼠标改变了状态，值为0表示左键，1表示中间键, 2表示右键。
altKey, ctrlKey, metaKey, shiftKey - 这4个布尔值声明在鼠标事件发生时，是否按住了Alt、Ctrl、Meta和Shift键
clientX, clientY - 声明鼠标指针相对于客户区或浏览器窗口的X Y坐标
screenX, screenY - 声明了鼠标指针相对于用户显示器的X Y坐标
relatedTarget - 对于mouseover事件来说，它是鼠标移到目标上时所离开的那进入的节点
5.IE Event对象最重要的属性有：
type - 与DOM Event对象的type属性兼容
srcElement - 与DOM Event对象的target属性兼容
button - 1表示左键，2表示右键，4表示中键
clientX, clientY - 与DOM Event对象的MouseEvent属性兼容
offsetX, offsetY - 声明鼠标指针相对于源元素的位置
altKey, ctrlKey, shiftKey - 与DOM Event对象的MouseEvent属性兼容
keyCode - 声明了keydown和keyup时间的键代码以及keypress事件的Unicode字符串, 用String.fromCharCode()可以把字符代码转换成字符串
fromElement, toElement - 等价于与DOM Event对象的MouseEvent对象的relatedTarget属性
cancelBubble - 一个布尔属性，如果设为true可以阻止当前事件进一步冒泡到包容层次的元素，与DOM的Event对象的stopPropagation()方法相同
returnValue - 一个布尔属性，设为false可以阻止浏览器执行与事件相关的默认动作，等价于DOM的Event对象的preventDefault()方法
6.IE事件模型中的捕获事件，setCapture()鼠标事件专门分派，直到调用releaseCapture()或者捕获被中断
7.合成事件，2级DOM事件模型和IE事件模型都允许创建合成事件对象，并且把它们分配给注册在文档元素上的事件句柄。在DOM事件模型中，使用Document.createEvent()来创建一个合成事件，使用Event.initEvent()、UIEvent.initUIEvent()或MouseEvent.initMouseEvent()方法来初始化事件，然后使用它所要分派给的节点的dispatchEvent方法来分派该事件。在IE中，使用Document.createEventObject来创建一个新的事件对象，然后使用目标元素的fireEvent()方法来分派他。
例子：
var DataEvent = {};
DataEvent.send = function(target, datatype, data){
if(typeof target == ’string’) target = document.getElementById(target);
if(document.createEvent){//DOM Event Model
var e = document.createEvent(’Events’);
e.initEvent(’dataavailable’, true, false);//event type, bubbling, noncancelable
}else if(document.createEventObject){//IE Event Model
var e = document.createEventObject();
}else{
return;
}
e.datatype = datatype;
e.data = data;

if(target.dispatchEvent) target.dispatchEvent(e);
else if(target.fireEvent) target.fireEvent(’ondataavailable’, e);
};
DataEvent.receive = function(target, handler){
if(typeof target == ’string’) target = document.getElementById(target);
if(target.addEventListener){
target.addEventListener(’dataavailable’, handler, false);
}else if(target.attachEvent){
target.attachEvent(’ondataavailable’, handler);
}
}