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

时间:2021-07-26 01:50:12

  在上篇中的事件绑定方法,相信大家都看到过了。

  不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下:

 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
 
(function(window){
        var Yx = function(){ }
        Yx.evGuid = ;
        //绑定事件
        Yx.prototype.bind = function(ele/*标签元素对象*/,evName/*方法名称,不带on前缀*/,evFunc/*方法*/){
            if(!evFunc.$$guid) evFunc.$$guid = Yx.evGuid++;//为新添加的事件添加标识
            if(!ele.events) ele.events = {};//为元素添加事件集合
            evName = evName;
            if(!ele.events[evName]){
                ele.events[evName] = {};
            }
            if(ele.events[evName][evFunc.$$guid]==undefined)
                ele.events[evName][evFunc.$$guid] = {};
            ele.events[evName][evFunc.$$guid] = evFunc;
            ele["on"+evName] = eventManager;//事件统一处理
        }
        //解绑事件
        Yx.prototype.unbind = function (ele/*标签元素对象*/, evName/*方法名称,不带on前缀*/, evFunc/*方法*/) {
            if(ele.events && ele.events[evName]){
                delete ele.events[evName][evFunc.$$guid];
            }
        }
        //事件管理
        /*
            这里是所有事件的入口函数,都是调用这个函数,通过它再调用对应函数
        */
        function eventManager(e){
            var self = this;//当前对象
            var e = e || window.event;//event对象
            if(!e.stopPropagation){//IE下的阻止默认行为,事件冒泡
                e.preventDefault = function() {this.returnValue = false;}
                e.stopPropagation = function() {this.cancelBubble = true;}
            }
            var evFuncs = self.events[e.type];//获取当前对象,指定的事件名称事件数组
            for(var key in evFuncs){
                evFuncs[key](e);
            }
        }
        window.yx = new Yx();
    })(window);

JavaScript Code

1
 
(function(window){/*...*/})(window);

  这种写法是自执行函数,当函数创建后立刻执行,常用于创建命名空间

 JavaScript Code 
1
 
window.yx = new Yx();

  在看这里,这里在window下定义了yx这个变量,其为YX这个类的一个对象,其实就是定义了一个名为yx的全局变量,这样我们就能通过yx.xxx来调用对应的方法了。语法如下:

 JavaScript Code 
1
2
3
4
5
6
7
 
var item = document.getElementById("test");//获取元素

yx.bind(item, "click", function (e) {
        //console.log("Div Click 1 !");
        alert("Div Click 1 !");
        e.stopPropagation();
    });