javascript - 工作笔记 (事件绑定)

背景:

  目前所做的项目,只能使用的是原生的javascript。对于javascript的事件绑定想必大家都懂得语法:

    1,在标签中使用属性调用方法:<div onclick="AAAA();"></div>

    2,在javascript中对标签对象绑定数据:

      <div id="test"></div>

      var item = document.getElementById("test");

      item.onclick = function(){};

        //方式一(不能绑定多个事件,如果有多个,后面会覆盖前面)

        //无兼容性问题

      item.attachEvent("onclick", function(){});

        //附加事件,不会覆盖,触发时依次执行,IE特有

      item.addEventListener();

        //同上,IE9,Firefox,Safari,Chrome和Opera都支持这个

  在使用中,经常会使用到绑定事件,为了兼顾一些浏览器的兼容性,在事件处理的时候,不得不多做些处理。

  后来在网上看到了一位网友对于事件绑定的封装,感觉很不错,于是就借鉴来了,嘿嘿。

 JavaScript Code 
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
 
function addEvent(elementment, type, handler) {
    if(!handler.$$guid) handler.$$guid = addEvent.guid++;// 为每个事件处理函数赋予一个独立的ID
    if(!elementment.events) elementment.events = {};// 为元素建立一个事件类型的散列表
    var handlers = elementment.events[type];// 为每对元素/事件建立一个事件处理函数的散列表
    if(!handlers) {
        handlers = elementment.events[type] = {};
        if(elementment["on" + type]) {// 存储已有的事件处理函数(如果已存在一个)
] = elementment["on" + type];
        }
    }
    handlers[handler.$$guid] = handler;// 在散列表中存储该事件函数
    elementment["on" + type] = handleEvent;// 赋予一个全局事件处理函数来出来所有工作
}
addEvent.guid = ;// 创建独立ID的计数器
function removeEvent(elementment, type, handler) {
    if(elementment.events && elementment.events[type]) {// 从散列表中删除事件处理函数
        delete elementment.events[type][handler.$$guid];
    }
}
function handleEvent(event) {
    var returnValue = true;
    event = event || fixEvent(window.event);// 获取事件对象(IE使用全局的事件对象)
    var handlers = this.events[event.type];// 获取事件处理函数散列表的引用
    for(var i in handlers) {// 依次执行每个事件处理函数
        this.$$handerEvent = handlers[i];
        if(this.$$handerEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
}
// 增加一些IE事件对象缺乏的方法
function fixEvent(event) {
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
}
fixEvent.preventDefault = function() {
    this.returnValue = false;
}
fixEvent.stopPropagation = function() {
    this.cancelBubble = true;
}
上一篇:CodeForces161D: Distance in Tree(树分治)


下一篇:2018-2019-2 20175236实验二《Java面向对象程序设计》实验报告