支付宝赞助帐号:service@kuitao8.com 

使用 jQuery on 绑定事件

Created2015-08-25   Views 2006    Author 懒人程序
在jQuery 1.7改版中,其中一项非常重要的改版就是取消了live()方法,为什么要取消live方法呢?
这是因为效能上的问题,也许你现在正在使用live做动态DOM Element事件绑定,你若懒得修改,那也不要紧,因为jQuery并没有强制删除该方法,但jQuery强烈建议使用新的方法,也就是今天要介绍的on(),off()方法。
若有使用其他JavaScript函式库(如backbone)的人一定知道on()方法,在其他的Library中on使用来绑定DOM Element的事件
 
为什麽要使用on()方法呢?
 
因为live方法有太多坏处不建议在使用,在本文开始说明之前必须了解event的bubble的处理方式
live方法会绑定事件处理方法到document element上,这也就是说我们绑定的事件处理方法会在DOM Tree的最顶层(Top),事件在传递时会经过层层关卡才会抵达到所绑定的元件,这样子造成了严重的效能问题。
 
还有live()有几个不好的缺陷
 
stopPropagete()无法使用在live()
live()无法使用方法链结(chainable)
on()
 
官方文件 : http://api.jquery.com/on/
 
$(elements).on(events [, selector] [, data], handler);
events 是一个事件型态,它可以是一个或多个事件字串,例如可以输入"click"或是"click keyup",注意多个事件必须使用空格隔开。
selector指定这个DOM元素,这个元素的后代元素都会接受event的传导,它是optional的,如果没有指定,表示开事件每次发生都会触发。
data 可以传入参数到event的callback函式,格式为{ }
handler 该event 触发后的处理函式。 这个方法除了可以指定事件字串来绑定以外还可以使用EventMap的方式进行事件的绑定,如下面范例 :
// old way - .bind(events, handler);
$('#container a').bind('click', function(event) {
event.preventDefault();
console.log('item anchor clicked');
});
// new way (jQuery 1.7+) - on(events, handler);
$('#container a').on('click', function(event) {
event.preventDefault();
console.log('item anchor clicked');
});
由bind() 修改至on()
 
若原本是件使用bind()的方式绑定的话,要修改为on()方法相当的简易,只需要将bind关键字修改为on即可,如下面范例
 
// do not use! - .live(events, handler)
$('#container a').live('click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});
// new way (jQuery 1.7+) - .on(events, selector, handler)
$('#container').on('click', 'a', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});
由live() 修改至on()
 
若原本使用live()方法现在要修改为on()方法,则需要修改较多的程式码,因为我们必须指定事件出发的位置(Bubble Position)来进行绑定,并运用到on()方法中的selector的参数指定到欲绑定事件之元素。
 
// do not use! - .live(events, handler)
$('#container a').live('click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
}); // new way (jQuery 1.7+) - .on(events, selector, handler) $('#container').on('click', 'a', function(event) { event.preventDefault(); console.log('item anchor clicked'); });
// new way (jQuery 1.7+) - .on(events, selector, handler)
$('#container').on('click', 'a', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});
由delegate() 修改至on()
 
若原本使用的是delegate()方法进行事件的绑定,那你只需要对调原本delegate()参数的位置就可以修改至on()方法,如下
 
// old way - .delegate(selector, events, handler);
$('#container').delegate('a', 'click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});
// new way (jQuery 1.7+) - on(events, selector, handler);
$('#container').on('click', 'a', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});
上一篇: jquery on()方法绑定多个选择器,多个事件
下一篇: jquery实现键盘监听
支持键盘 ← →

邮件订阅

订阅我们的精彩内容