jQuery中.bind() .live() .delegate() .on()区别

Posted 2020-08-20 筱qian

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的时间处理函数

$(‘#members‘).on(‘click‘,‘li a‘,function(){});

bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数；

$(‘a‘).bind(‘click‘,function(){})

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是后来添加的

$("a").live(‘click‘,function(){});

delegate(selector,[type],[data],fn)指定的元素（一定是属于被选元素的子元素）添加一个或多个事件处理函数

$(‘#container‘).delegate(‘a‘,‘click‘,function(){})

差别：

.bind()直接绑定到元素上，代价大，会把相同的一个事件处理程序hook到所有匹配的DOM元素上

.live()是通过事件冒泡的方式来绑定到元素上的。更适合列表类型，绑定到DOM节点上，支持动态数据，不建议使用

.delegate()则是更精确的小范围使用事件处理，性能优于.live()，同时可以添加事件处理方法到动态添加的元素上

.on()最新版呗的事件绑定机制，可以用on来代替其他山中方法