kun的记事本 - js&html&css&php

批量添加和管理事件处理

作者：kun10 发布时间：January 22, 2011 分类：JavaScript

引入behavior对象

在做日常的过程中，释然为我们大家制定了一个behavior对象。
他的作用就是用来统一的管理页面里面需要的事件绑定。
我们先看一下这个behavior对象的调用：

behavior.add(JSON);
K.ready(function() {
    behavior.apply();
});
以上用于添加事件

JSON的格式如下：
{
    'selector': func,
    'selector': {
        'event1':func1,
        'event2':func2
    }
}

这样的一个调用使得我们可以专注于对函数功能的编写，而不用再过于关注对dom对象的事件绑定的逻辑。

在没有这个对象的之前，我们写事件处理很容易随自己的想法写一大片的功能代码。
就像这样。

E.on(ele, 'click', function(){
    //里面写满了各种各样的处理逻辑，长的不得了。    
});    

这样在写的时候会让我们觉得很爽，但是我们却不愿意回头再整理这样的代码。

原因：
里面的事件处理特别长，要是里面再调用点别处（甚至别的文件的代码），有时候读代码都费劲。
事件处理函数编写零散，尤其多人合作的时候代码更是可能写到不一样的地方，难以归宗管理。

behavior的实现

behavior的实现主要依据它要达到的功能。

首先它要对事件进行集体的管理、其次它要对dom元素进行批量的事件绑定。

所以大体可以这样，这里我们把behavior对象通过对象来实现。

behavior = {
    add: func(JSON){},
    _events: {}，
    apply: func(){}
}

我们用_events来做事件函数列表管理，再用add来对dom元素进行统一的事件添加管理。

最后使用apply方法把事件和对应的元素对应绑上。

如上所说add方法的作用是给dom元素和事件函数做一个映射。它接受的参数是一个json对象。

我们先做一些约定：

• 如果用户直接对元素绑定了函数，就表示dom元素载入完成时执行函数
• 如果用户指定了元素触发函数的事件，就对该元素绑定事件。

约定behavior使用的JSON的格式如下：

{
    'selector': func,
    'selector': {
        'event1':func1,
        'event2':func2
    }
}    

下面我们来分析add方法，add方法就是处理json对象，并把找到的dom元素和事件函数做关联

add: function(obj){
    //that用来保存behavior的活动对象
    var that = this;
    //K表示KISSY对象
    //K.each是用来遍历一个对象的属性的方法
    //当然这个对象我们上面做了约定！
    //所以在解析它的时候我们可以写的简单一些
    //如果我们要接受更加随意的格式，就要在解析对象的容错
    //上面下更多的功夫
    K.each(obj, function(one, name) {
        var el = D.query(name);//找到符合的元素，这里的name就是传入的selector

        if (K.isFunction(one)) {
            events = {
                'load': one//直接写函数的话就是用
            }
        } else {
            //如果是对象，就直接赋给events
            events = one;
        }

        that._events = events;//关联的结果保存在_events里面
    });

    return that;
}

之后就是使用apply对象来集中的绑定元素事件,apply准备放在K.ready事件里面触发。

apply: function() {
    //KISSY.ready 不能传送作用域，所以不能使用 this
    var that = behavior;

    K.each(that._events, function(one, name) {
        var el = D.query(name);
        if (el.length > 0) {
            //真正要做绑定了，先找到要绑定的元素
            //把每一个函数绑定到元素上面
            //之前的one就保存了元素的事件和对应的函数
            K.each(one, function(fn, eventType) {
                 
                if('load' === eventType) {
                    //因为已经是domready了，直接运行函数
                    fn(el);
                } else {
                    //使用KISSY的Event来绑定事件函数    
                    E.on(el, eventType ,fn);
                }
            });
        }
    });
}    

这样我们可以实现对事件函数的统一管理和统一添加。
也可以专注于对事件处理的函数编写。
另外在事件函数内部，我们也应该对用得较多的功能块使用函数封装来复用。

本例里面使用了KISSY API的each方法，ready方法，KISSY的Event对象和Dom对象。了解更多KISSY点此

标签: 事件;事件函数