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();
    });

相关文章

