jquery中on/delegate的原理
早期版本中叫delegate, 后来有过live函数,再后来统一用on。下面的方法等效:
// jQuery 1.3
$(selector).(events, data, handler);
// jQuery 1.4.3+
$(elements).delegate(selector, events, data, handler);
// jQuery 1.7+ live过时 旧版本的jQuery中用户,应优先使用.delegate()来取代.live()
$(elements).on(events, selector, data, handler);
代理的好处就是动态添加的元素,之前之前绑定的事件依然有效,直接使用bind是无法在这种情况下生效的。
代理事件其实就是利用了事件冒泡机制,给父元素绑定事件,在handler中判断target是否是期望的目标元素,然后做相应的处理。
$(document).bind('click', function(e) {
var ev = e || event;
var target = $(ev.target || ev.srcElement);
if (target.hasClass('btn')) {
console.log('xxxx: ','you clicked btn');
return false;
}
return true;
});