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中非常重要的一个方法,在我们进行事件绑定时经常会用到,通过深入分析源码,我们可以更好地理解和应用这个方法。