基于jQuery的事件侦听机制

HTML

在需要响应事件的元素增加一个自定义元素"data-func", 其对应的值是js的function name

<input id="1" type="button" data-func="myspace.function1" value="function1"/>

<a id="2" data-func="myspace.function2" href="#">function2</a>

<input id="3" type="text" data-func="myspace.function3"/>

事件绑定

//绑定body中为带有data-func属性的元素绑定click事件
$("body").on('click.myspace', '[data-func]', function (e) { 
    e.preventDefault();
    eventHandler(e);
}).on('change.myspace','[data-func]',function(e){
    e.preventDefault();
    eventHandler(e);
}).on('keypress.myspace','input[data-func]:text',function(e){
    if (e.which === 13) {
        eventHandler(e);
    }
})

function.js

var myspace = (function(){
    function1: function(obj){
        alert($(obj).attr("id"));
    },
    function2: function(obj){
        alert($(obj).attr("id"));
    },
    function3: function(obj){
        alert($(obj).attr("id"));
    }
});

//获取元素中自定义的data-func
function eventHandler(e){
    var func = $(e).attr('data-func');
    var win = window;
    runFunc(win,func,e);
}

//解析data-func，支持s1.s2.obj.func方式，倒数第2个是对象，func必须是函数
//myspace.function2, myspace是一个对象，function2是属于myspace的函数
//调用call来调用函数
function runFunc(obj, prop, e){
    var props = prop.split('.'),
    propsLen = props.length,
    n = 0,
    self = win,
    len = 0
    
    for (n = 0; n < propsLen; n++) {
        if (obj && obj[props[n]]) {
            obj = obj[props[n]];
            //倒数第2个元素是调用方法的对象
            if (propsLen - 2 === n) {
                self = obj;
            }
            //最后一个元素是方法名
            if (propLen - 1 === n || propLen === 1){
                obj.call(self, e);
            }
        }
    }
    
}