jQuery 事件绑定
在 jQuery1.7 之后,推荐统一使用 on() 来进行事件绑定。
在讲事件绑定之前,需要首先明确一个概念。通常,我们是需要对具体的节点的相关事件作处理,比如一个按钮被点击了之类的。但这里有一个问题,如果我们能获取到具体的节点,当然没什么说的。不过有时,我们要处理的节点却还没有存在,但是我们又要预定义它的事件处理。比如,我们说在一个 UL 中,每一个 LI 被点击时,都要执行一个函数。但是, UL 中的内容本身可能是变化的,开始时它只有两个 LI ,之后又变成了三个 LI ,多出的那一个 LI 也要能响应事件才行。
上述的情况是一个普遍的需求。我们可以利用事件的冒泡机制来实现目的。我们把事件处理绑定在 UL 上,这样,当 LI 被点击时,会冒泡到上级的 UL ,这样在处理事件时就可以判断出具体是哪个节点的事件,以便作下一步处理。
当然,原理是这样,具体操作时, on() 这个方法已经把一切都封装好了。
- .on()
- 绑定事件
- .off()
- 移除绑定
- .one()
- 绑定单次事件
on() 的基本使用方式是: .on(event, handler)
最基本的使用:
$('#btn').on('click', function(eventObj){ console.log('haha'); } );
对于 handler ,它默认的上下文是触发事件的节点(与行为节点无关):
<div id="btn"> <div>哈哈</div> <div id="btn2">哈哈</div> <div>哈哈</div> </div> $('#btn').on('click', function(eventObj){ console.log(this); } );
你看到是 div#btn 。
当然,使用 $.proxy() 你可以随意控制上下文:
$('#btn').on('click', $.proxy(function(eventObj){ console.log(this.a); }, {a: 123}) );
event 参数还支持通过:
- 以 . 分割的子名字,这些名字父子的名字空间效果。
- 以空格分割的多个事件。
名字空间效果:
$('#btn').on('click.my', function(eventObj){ console.log('123'); } ); var f = function(){ $('#btn').off('click.my'); }
$('#btn').on('click.my.other', function(eventObj){ console.log('123'); } ); var f = function(){ $('#btn').off('click.my'); }
多个事件:
$('#btn').on('click.my click.other', function(eventObj){ console.log('123'); } ); var f = function(){ $('#btn').off('click.my'); }
on() 的扩展使用方式为: .on( events [, selector] [, data], handler(eventObject) )
。
其中的 data 是一个数据存储空间,在 eventObj.data 中访问到。
$('#btn').on('click', {a: 123}, function(eventObj){ console.log(eventObj.data.a); } );
而 selector 则是一个过滤规则,这对于在前面讲过的,在父级节点预定义不存在节点的行为很有用。
<div id="btn"> <span>哈哈</span> </div> $('#btn').on('click', 'p', function(eventObj){ console.log('here'); } ); var f = function(){ $('#btn').append('<p>新的</p>'); }
on() 的另外一种调用形式: .on( events-map [, selector] [, data] )
:
$('#btn').on( { 'click': function(eventObj){console.log('click')}, 'mousemove': function(eventObj){console.log('move')} } );
off() 的使用方式与 on() 完全类似:
var f = function(eventObj){ console.log('here'); } $('#btn').on('click', f); $('#btn').off('click'); $('#btn').off('click', '.cls'); $('#btn').off('click', f);
更多建议: