淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery中的delegate方法可以为未来动态创建的元素提供事件绑定,它的源码实现非常复杂,需要借助于其他方法和属性来完成。下面就来分析一下delegate的源码。

jQuery.fn.delegate = function (selector, types, data, fn) {
var origFn, type;
// 处理参数传入方式
if (typeof selector === 'object' && typeof types === 'string') {
data = types;
types = selector;
selector = undefined;
}
// 确保data的传入方式为object
if (typeof data === 'function') {
origFn = fn;
fn = data;
data = undefined;
}
// 如果types不是字符串类型,则需要将它转化为字符串
if (typeof types === 'string' && /[\w-]/.test(types)) {
types = types.split(' ');
for (var i = 0; i< types.length; i++) {
type = types[i];
if (rtypenamespace.test(type)) {
type = type.split('.');
e.type = type[0];
selector = selector ? selector + '.' + type[1] : type[1];
type = type[0];
}
// 利用其他方法和属性来实现delegate
this.on(types[i], selector, data, fn, origFn);
}
}
return this;
};

在源码中,首先会处理参数传入方式,如果selector为object,则将其认定为设置的事件、数据和回调函数集合,然后再分别处理types、data和fn。接着会根据types字符串来判断绑定的事件类型是否含有命名空间,如果有,则将type和selector分别赋值为type[0]和type[1],然后再将type[0]作为事件类型,type[1]作为命名空间进行事件绑定。最后,通过调用on方法来实现delegate方法的实现。

总之,delegate是jQuery中非常重要的一个方法,在我们进行事件绑定时经常会用到,通过深入分析源码,我们可以更好地理解和应用这个方法。