1.bind()
$(selector).bind(event,[data],function)
bind方法给每个$(selector)元素都注册一个事件处理函数,不支持未来增加的元素。上面两段代码等价的。
$('p').bind('click',function(){ alert('p');});$('p").click(function(){ alert('p');});
2.live()
$(selector).live(event,[data],function)
live方法把事件处理函数绑定到document元素上,事件冒泡到document时,检查目标元素是否匹配selector.,并且是否是event事件,若这两个条件都满足,则执行事件处理函数。
$('p').live('click',function(){ alert('p');});
3.delegate()
$(selector).delegate(childSelector,event,[data],function)
delegate方法把事件处理函数绑定到$(selector)元素上,事件冒泡到$(selector)元素上时,检查目标元素是否匹配childSelector,并且是否event事件,若这两个条件都满足,则执行事件处理函数。
$('#container').delegate('p',click,function(){ alert('p');});
4.on()
$(selector).on(event,[childSelector],[data],function)
bind方法 live方法 delegate方法都是基于on方法实现的。若有childSelector,是给$(selector)中的元素的子元素添加事件处理函数,事件处理函数添加到$(selector)中的元素上,事件冒泡到$(selector)中的元素时,检测目标元素是否是匹配childSelector的元素,是否是event事件,若两者都是,执行function。若没有childSelector,事件处理函数function绑定到$(selector)中的元素。
//bind$('p').bind('click',function(){ alert('p');});$('p').click(function(){ alert('p');});$('p').on('click',function(){ alert('p');});//live$('p').live('click',function(){ alert('p');});$(document).on('click','p',function(){ alert('p');});//delegate$('#container').delegate('p','click',function(){ alert('p');});$('#container').on('click','p',function(){ alert('p');});