码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2014-08-25 22:30:04      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   for   ar   问题   

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

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

 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 = 
0;
        
//绑定事件
        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();
    });

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

标签:style   blog   http   color   java   io   for   ar   问题   

原文地址:http://www.cnblogs.com/urols-jiang/p/3935938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!