JQuery 之 Bind

JQUERY学习之bind

 

Bind(type ,fn)  返回值:jquery

 

概述:为每个匹配元素的特定事件绑定事件处理函数。

 

.bind()方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus，mouseover，resize等都是可以作为type参数传递进来的。

 

Jquery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind("click")。一共有一下这些方法：

blur,focus,focusin,focusout,load,resize,scroll,unload,

click,dbclick,change,select,submit,error.

mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave

keydown,,keypress,keyup

 

任何作为type参数的字符串都是合法的。如果一个字符串不是原声的JavaScript事件名，那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发，但是可以通过使用.trigger（）或者.triggerHandler()在其他代码中手动触发。

 

如果type参数的字符串中包含一个点（.）字符，那么这个事件就是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说，如果执行.bind('click.name',handler)，那么字符串中的click是事件类型，而字符串name就是命名空间。命名空间允许我们取消绑定或者触发一些特定类型的事件，而不用触发别的事件。参考unbind（）可以获取更多信息。

 

当一个事件传到一个元素上，所偶绑定在上面的针对那个事件的处理函数都会被触发。如果注册了多个事件处理函数，总是按照绑定的顺序一次触发。当所有绑定的事件处理函数执行完毕后，事件继续沿着普通的事件冒泡途径上浮。

 

.bind（）最基本的用法是：

$（'#foo'）.bind('click',function(){

alert(' foo is clicked ! ');

});

这个代码能使ID为foo的元素响应click事件。当用户点击元素内部之后，就会弹出一个警告框。

 

$（'#foo'）.bind('click',function(){......}); 等同于 $（'#foo'）.click(function(){......});

 

一次也可以绑定多个事件类型，每个事件类型用空格分隔：

$('#foo').bind('mouseenter mouseleave', function() {

  $(this).toggleClass('entered');

});

这个代码让一个<div id="foo" >的元素当鼠标移进去的时候,添加了一个class为entered,而当鼠标移出div的时候,则取出这个class。

在jquery1.4中,还可以通过传入一个映射来绑定多个事件处理函数:

$("#foo").bind({

click:function(){

//......

},

mouseover:function(){

//......

}

});

事件处理函数

fn这个参数接受一个回调函数,在这个事件处理函数内部,this指向这个函数绑定的DOM元素。如果要让这个元素编程jquery对象来使用jquery的方法，可以把这个对象传入$（）重新封装。比如：

$（"#foo").bind("click",function(){

alert($(this).text());

});

这个代码执行之后,当用户点击了ID为foo的元素内部之后,它的文本内容就会出现在一个警告框中。

事件对象

fn这个参数的回调函数还可以接受一个参数。当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。

这个事件对象通常是没有必要且可以省略的参数，因为当这个事件处理函数绑定的时候就能够明确知道他在触发的时候应该做些什么，通常就已经可以获得充分的信息了。然而在有些时候，在事件初始化的时候需要获取更多关于用户环境的信息。可以参考完整的关于事件对象的内容（英文）。

在事件处理函数内返回false就等价于执行事件对象上的.preventDefault()和.stopPropagation()。

可以像这样在事件处理函数内使用事件对象：

$(document).ready(function() {

  $('#foo').bind('click', function(event) {

    alert('The mouse cursor is at ('

      + event.pageX + ', ' + event.pageY + ')');

  });

});

 

注意，这个参数添加到了一个匿名函数上。这个代码可以让用户在点击ID为foo的元素时，报告鼠标点击时相对于页面的坐标。

传递事件数据

可选的第二个参数data通常用的很少。如果提供了这个参数，那么我们就能把一些附加信息传递给事件处理函数了。这个参数有个很好的用处，就是处理闭包带来的问题。比如我们有两个事件处理函数要指向同一个内部变量：

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! 。变量值被改变了。为了回避这个问题，我们可以把message变量作为data参数传递进去：

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);

});

 

这时在函数内部不再直接指向这个变量了；取而代之的是按值传递给了data参数，他能保持绑定事件时的值。第一个函数现在会显示Spoon!，而第二个则显示Not in the face!

注意，如果这个对象按引用传递给了函数，那么将会使情况变得极其复杂。

另外，可以参考.trigger()方法来了解如何在事件触发时传递数据，而不是在事件绑定的时候传递数据。

在jQuery 1.4中，不再支持把数据以及事件附加到一个object、embed或者applet元素上面。因为当往Java applet元素上附加数据时，会触发一个严重错误警告。

 

转载于:https://www.cnblogs.com/liuzhong/archive/2011/07/29/2121063.html