javascript - 工作笔记 （事件绑定二）

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

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

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