jquery事件绑定

jQuery是一款优秀的JavaScript框架,上次我讲了下jquery如何绑定事件,更多的是讲解jQuery的实现方式,这里再次介绍下jQuery的事件机制

bind/Unbind

在jquery的事件模型中，有两个基本的事件绑定函数，bind与unbind，这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的onfocus，onblur，onmouseover，onmousedown等事件都可以作为bind的参数进行传递。

1	$("#id").bind('click',function(){alert('tt!')});

其中bind的第一个参数代表的含义是：事件类型(注意不需要加on)，function中的代码就是你要执行的逻辑代码

多个事件绑定：bind还允许你绑定多个事件，事件名字之间用空格隔开，例如：

1	$('a').bind('click mouseover',function(){

2	alert('hello');

3

})

在最新的jquery1.4版本中，对bind方法进行了改进，你可以在bind方法传入一个类JSON对象来一次绑定多个事件处理函数。

1	$('a').bind({

2	click:function(){alert('a');},

3	mouseover:function(){alert('a again!')}

4

});

5

})

在function函数中，你还可以通过传递一个javaScript对象给function方法，这个事件对象通常是可以省略的。

bind中还有一个参数data，该参数一般情况下很少使用，通常为了解决在同一个方法中处理同一个变量时有很好的处理。

1	var productname="Sports Shoes";

2	$('#Area').bind('click',function(){

3	alert(productname);

4

});

5	productname="necklace",

6	$('#Area').bind('click',function(){

7	alert(productname);

8

});

由于变量productname被重新赋值，所以输出的消息都是”necklace”,这里不了解可以去查阅下关于JavaScript的变量作用域,要解决这个问题就必须使用到data参数，

1	var productname="Sports Shoes";

2	$('#Area').bind('click',{pn:productname},function(){

3	alert(event.data.pn);

4

});

5	productname="necklace",

6	$('#Area').bind('click',{pn:productname},function(){

7	alert(event.data.pn);

8

});

One

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。该方法与bind方法的参数一样，与bind方法的区别就是只对匹配元素的事件处理执行一次，执行完之后，以后再也不会执行,当然重新发起web请求时它又会执行一次。

1	$('a').one('click',function(){

2	alert('a');

3

})

单击页面上的a元素后，弹出消息，除非用户发起第二次请求，否则再次点击a元素不会弹出消息对话框。

live

该方法主要是能处理动态添加的元素，给那些后添加的元素也一样绑定事件。

1	$('a').live('click',function(){

2	alert('show message!');

3

})

然后如果我添加一个元素，

1	$('body').appnend('<a href=#>Another Element</a>');

那么该元素也会被触发事件处理函数alert。

另外，jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind(‘click’)。

  
JQuery一个对象绑定多个事件 

1. jQuery("#id").click(func1).mouseover(func2)//方法连写，func为方法的名字
2. jQuery("#id").click(function(){//你的具体方法实现}),mouser(function(){//你的具体方法实现});
3. jQuery("#id").bind("click mouseover",func)//两个事件中间有空格 ，func为方法的名字
4. jQuery("#id").bind("load scroll",function(){//你的具体方法实现}); 
   
   一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change,select, submit, keydown, keypress, keyup, error 等。

注意：在给form绑定onsubmit事件时，

写成：$("#form1").bind("onsubmit", function(){});  一直触发不了onsubmit事件， 因为这里绑定错了， 应该绑定submit， 如：$("#form1").bind("submit", function(){});