live,on,delegate,bind使用方法知识点

最近对于事件绑定处理用的比较多，进行总结一下

bind

单个元素的事件绑定
扫描文档找出所有的$(‘a')元素，并把alert函数绑定到每个元素的click事件上。

$('a').bind('click',function(){alert('That tickles!');})

备注：
bind并不能对未来添加的元素绑定事件;原理和直接$("a").click是同一机制

live

作为事件冒泡的流程，默认将事件绑定到$(document)元素上，采用事件代理的模式
任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个如：click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数。

$('a').live('click',function(){alert('That tickles!')})

备注：以上代码首先要扫描整个的文档查找所有的$(‘a')元素，把它们存成jQuery对象，效率较低;
只能监听css选择器

delegate

和live很相似，需要指定事件代理的监听方，效率高于live

$('#container').delegate('a','click',function(){alert('That tickles!')})

备注：当很多元素需要监听时，较低开销

on

jquery1.7之后的推荐事件绑定用法

.on( events [, selector] [, data], handler(eventObject) )

普通使用

$("a").on("click",function(){})

事件代理使用

$("div").on("click","a",function(){})

监听div标签下a的点击事件

转载于:https://www.cnblogs.com/likelight/p/3865448.html