1. Basic Event Handling
    • 定义为HTML属性 :　一串javascript 代码
      作用域链很复杂.
    • 作为javascript属性的事件处理器: 普通javascript函数
      作用域链比较简单. (调用对象,全局对象)
    • 特殊事件-计时器事件
      setTimeout() 和setInterval()
    • 特殊事件-错误事件
      window.onerror . 从来不用这个, 我觉得也不应该用.
  2. Event Object
    首先 在事件处理函数中一般用event || window.event 来获得事件对象.
    常用的属性有下面几个</p>
    • target / srcElement 发生事件的DOM元素.
    • preventDefault 取消默认事件 (IE 设置 returnValue为false,来取消)
    • stopPropagation / cancelBubble 取消传播.
    • relatedTarget mouseout/mouseover 事件才会用 . (没用过:))
    • which 鼠标事件 :(1,2,3 表示左中右) 键盘事件:按键编码
      IE对两者分别是 button 和keyCode
    • ctrlKey , altKey, shiftKey, metaKey 修饰键是否按下
    • pageX/pageY 事件发生的位置. 相对于窗口的左上角. 下面是jquery 中event中的fix函数. 处理不同浏览器中的event对象的不同点.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

fix: function(event) {
    // store a copy of the original event object
    // and clone to set read-only properties
    var originalEvent = event;
    event = jQuery.extend({}, originalEvent);
 
    // add preventDefault and stopPropagation since
    // they will not work on the clone
    event.preventDefault = function() {
        // if preventDefault exists run it on the original event
        if (originalEvent.preventDefault)
            originalEvent.preventDefault();
        // otherwise set the returnValue property of the original event to false (IE)
        originalEvent.returnValue = false;
    };
    event.stopPropagation = function() {
        // if stopPropagation exists run it on the original event
        if (originalEvent.stopPropagation)
            originalEvent.stopPropagation();
        // otherwise set the cancelBubble property of the original event to true (IE)
        originalEvent.cancelBubble = true;
    };
 
    // Fix target property, if necessary
    if ( !event.target &amp;&amp; event.srcElement )
        event.target = event.srcElement;
 
    // check if target is a textnode (safari)
    if (jQuery.browser.safari &amp;&amp; event.target.nodeType == 3)
        event.target = originalEvent.target.parentNode;
 
    // Add relatedTarget, if necessary
    if ( !event.relatedTarget &amp;&amp; event.fromElement )
        event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
 
    // Calculate pageX/Y if missing and clientX/Y available
    if ( event.pageX == null &amp;&amp; event.clientX != null ) {
        var e = document.documentElement, b = document.body;
        event.pageX = event.clientX + (e &amp;&amp; e.scrollLeft || b.scrollLeft || );
        event.pageY = event.clientY + (e &amp;&amp; e.scrollTop || b.scrollTop || );
    }
 
    // Add which for key events
    if ( !event.which &amp;&amp; (event.charCode || event.keyCode) )
        event.which = event.charCode || event.keyCode;
 
    // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
    if ( !event.metaKey &amp;&amp; event.ctrlKey )
        event.metaKey = event.ctrlKey;
 
    // Add which for click: 1 == left; 2 == middle; 3 == right
    // Note: button is not normalized, so don't use it
    if ( !event.which &amp;&amp; event.button )
        event.which = (event.button &amp; 1 ? 1 : ( event.button &amp; 2 ? 3 : ( event.button &amp; 4 ? 2 :  ) ));
 
    return event;
}
  1. 添加删除/事件
    IE: ele.attachEvent(“onxxx”,xxx_handler)
    ele.detachEvent(“onxxx”,xxx_handler)
    The Level 2 DOM Events :
    ele.addEventListener(“xxx’,xxx_handler,is_capture)
    ele.removeEventListener(“xxx’,xxx_handler,is_capture)
  2. 对事件的支持浏览器差异很大. 不过已经有很多现成的库, 为我们封装了起来. 能用库就用库吧.