VioletQQY的任意门
0%

JaveScript 事件机制

Posted on In

JavaScript 事件机制

DOM 事件流

DOM2 级事件 规定的事件流包括三个阶段： 事件捕获阶段、处于目标阶段和事件冒泡阶段。

DOM0 级事件处理程序

onclick

DOM2 级事件处理程序

addEventListener removeEventListener

IE 事件处理程序

attachEvent detachEvent

事件处理程序

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
var EventUtil = {
    // 添加事件
    addHandler: function(element, type, handler) {
        // DOM2 级事件处理
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        // IE 事件处理
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        // DOM0 事件处理
        } else {
            element['on' + type] = handler;
        }
    },
    // 移除事件
    removeHandler: function(element, type, handler) {
        // DOM2 级事件处理
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        // IE 事件处理
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        // DOM0 事件处理
        } else {
            element['on' + type] = null;
        }
    },
    // 获取事件对象
    getEvent: function(event) {
        return event ? event : window.event;
    },
    // 获取当前标签
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    // 阻止事件发生
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    // 防止事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

参考资料