jquery bind函数传递事件数据
2014-05-13 16:57 南言北兼 阅读(487) 评论(0) 编辑 收藏 举报1. mouseover,mouseout事件小技巧
$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); });
通过bind函数同时绑定鼠标移入,移出事件,可以简单实现鼠标移入移出处理。
2. Passing Event Data(传递事件数据)
可选的eventData
参数不常用。当提供时,这种参数允许我们给处理函数传递额外的信息。一个方便的使用这个参数来解决由于闭包造成的问题。例如,假设我们有两个事件处理函数都引用了相同的外部变量:
1
2
3
4
5
6
7
8
|
var message = 'Spoon!'; $('#foo').bind('click', function() { alert(message); }); message = 'Not in the face!'; $('#bar').bind('click', function() { alert(message); }); |
由于两个事件处理函数的闭包中,都引用了 message
,所以,当事件被触发时,这两个事件处理都会显示 Not in the face!,因为变量的值已经改变了。为了避免这个问题,我们可以使用 eventData
来传递信息:
1
2
3
4
5
6
7
8
|
var message = 'Spoon!'; $('#foo').bind('click', {msg: message}, function(event) { alert(event.data.msg); }); message = 'Not in the face!'; $('#bar').bind('click', {msg: message}, function(event) { alert(event.data.msg); }); |
这一次该变量没有提供给处理函数;相反,变量通过值传递给eventData
,所以就可以在事件绑定的时候进行赋值操作。 第一个处理程序,现在将显示Spoon!而第二个会提醒Not in the face!。