DOM--4 响应用户操作和事件（2）

自定义事件

//旧的方法

//创建
var event = document.createEvent('Event');
//初始化
event.initEvent('build', true, true);
//监听
A.$('a').addEventListener('build', function (e) {
     console.log('build');
  }, false);
//触发
  A.$('a').dispatchEvent(event);

//新的方法
var event = new Event('build');
event.initEvent('build', true, true);
A.$('a').addEventListener('build', function (e) {
     console.log('build');
}, false);
A.$('a').dispatchEvent(event);

跨浏览器的事件属性和方法

与DOM文档中每个节点实际都扩展自其他一些DOM对象一样，事件对象也是；在W3C模型中，传递到事件监听器中的事件对象并不总是相同的，不过这些事件对象却拥有相同的属性
当浏览器调用load事件时，传递到事件监听器的是DOM2事件规范中定义的Event对象；当调用click事件时，传递到事件监听器的对象是一个MouseEvent对象

DOM2级事件对象的继承关系如下图所示：

Event对象

事件对象中包含着用于控制事件流和目标对象的方法和属性。包括：

• bubbles：布尔值，表示是否是冒泡阶段
  
• cancelable：布尔值，表示事件是否具有可以取消的默认动作
  
• currentTarget：当前正在处理的DOM元素
  
• target：最早调用事件序列的对象（EventTarget对象的实例）
  
• timestamp：DOMTimeStamp对象，用来确定创建事件后的毫秒数
  
• type：包含事件名称（例如click）的字符串
  
• eventPhase：表示处于事件流的阶段，使用1-3的整数来表示，也可以使用Event常量CAPTURE_PHASE、AT_TARGET和BUBBLING_PHASE。
  
• initEvent(eventType,canBubble,cancelable)：初始化通过document.createEvent(‘Event’)方法创建的事件对象
  
• preventDefalt()：取消对象的默认动作
  
• stopPropagation()：停止事件流的进一步执行

MouseEvent对象

鼠标事件对象中包含与鼠标指针的位置相关的属性，也包含鼠标事件发生的同时可能会按住的键盘中某个健的信息

• altKey,ctrlKey,shiftKey: 布尔值，表示鼠标事件发生的同时，是否也按住了Alt,Ctrl,Shift键；
  

• button: 表示鼠标按下的键

  • 0 : 左键
    
  • 1 : 中键
    
  • 2 : 右键
    
• clientX/clientY: 相对于浏览器的坐标
  
• screenX/screenY: 相对于屏幕的坐标
  

• relatedTarget: 在多数情况下，这个属性值是null，但在mouseover事件中，它引用的是鼠标离开的前一个对象；在mouseout事件中，它引用的是鼠标之前进入的那个对象。

处理浏览器的不兼容

访问事件的目标元素

IE没有提供target和currentTarget属性，但却提供了srcElement属性。对于Safari而言，文本节点会代替包含它的元素节点变成事件的目标对象。

确定点击了哪个鼠标键

• W3C规定：

  • 0表示按下了左键
    
  • 1表示按下了中键
    
  • 2表示按下了右键
    

• Microsoft的规定

  • 0表示没有按下任何键
    
  • 1表示按下左键
    
  • 2表示按下右键
    
  • 3表示同时按下了左右键
    
  • 4表示按下了中键
    
  • 5表示同时按下了左中键
    
  • 6表示同时按下了右中键
    
  • 7表示同时按下了所有三个键

检测事件具有toString()方法并且返回的是MouseEvent，那么考虑使用W3C的方式；否则如果仍然存在button属性，那就可以假设是IE

处理鼠标的位置

虽然W3C和IE都定义了clientX和clientY鼠标，但它们在确定滚动后的位移属性时却不相同。W3C使用document.documentElement.scrollTop，而IE则使用document.body.scrollTop。对于Safari而言，它把位置信息放在了事件的pageX和pageY属性中。

访问键盘命令

var code = event.keyCode;
var value = String.fromCharCode(code);