正文
javascript - 工作笔记 （事件绑定二）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在上篇中的事件绑定方法，相信大家都看到过了。
不过这里有点小小的问题，这些方法，变量都是全局的，难免会与其他的库或者方法发生冲突而被覆盖，因此，我在这里做了小小的封装，如下:
CoolFormat Source Formatter http://blog.csdn.net/akof1314
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);
|
这种写法是自执行函数，当函数创建后立刻执行，常用于创建命名空间
CoolFormat Source Formatter http://blog.csdn.net/akof1314
JavaScript Code
|
1
|
window.yx = new Yx();
|
在看这里，这里在window下定义了yx这个变量，其为YX这个类的一个对象，其实就是定义了一个名为yx的全局变量，这样我们就能通过yx.xxx来调用对应的方法了。语法如下：
CoolFormat Source Formatter http://blog.csdn.net/akof1314
JavaScript Code
|
1
2 3 4 5 6 7 |
var item = document.getElementById("test");//获取元素
yx.bind(item, "click", function (e) {
|
