jQuery之事件

一、事件列表

　　1.blur()　　　　　　当失去焦点时触发。包括鼠标点击离开和TAB键离开。

　　2.change()　　　　 当元素获取焦点后，值改变失去焦点事触发。

　　3.click()　　　　　　当鼠标单击时触发。

　　4.dblclick()　　　　 当鼠标双击时触发。

　　5.error()　　　　　 当javascript出错或img的src属性无效时触发。

　　6.focus()　　　　   当元素获取焦点时触发。注意：某些对象不支持。

　　7.focusin()　　　   当元素或其子元素获取焦点时触发，与focus()区别在于能够检测其内部子元素获取焦点的情况。

　　8.focusout()　　　 当元素或者其子元素失去焦点时触发，与focusout()区别在于能够检测内部子元素失去焦点的情况。　

　　9.keydown()　　   当键盘按下时触发。

　　10.keyup()　　　　当按键松开时触发。

　　11.mousedown()　　　　当鼠标在元素上点击后触发。

　　12.mouseenter()　　　　当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是，鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。

　　13.mouseleave()　　　　当鼠标从元素上移出时触发。

　　14.mousemove()　　　  当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。

　　15.mouseout()　　　　   当鼠标从元素上移开时触发。

　　16.mouseover()　　　　 当鼠标移入元素时触发。

　　17.mouseup()　　　　    当鼠标左键按下释放时触发。

　　18.resize()　　　　　　   当浏览器窗口大小改变时触发。 $(window).resize();

　　19.scroll()　　　　　　　 当滚动条发生变化时触发。

　　20.select()　　　　　　   当input里的内容被选中时触发。

　　21.submit()　　　　　　 提交选中的表单。

　　22.unload()　　　　　　 当页面卸载时触发。　　

二、事件常用方法

事件名称	说明
bind	绑定事件
hover	切换事件
toggle	顺序执行事件
unbind	移除事件
one	仅执行一次的事件
trigger	DOM加载完毕后自动执行的事件
live	从DOM根节点为元素绑定事件
die	解除live()方法绑定的事件
delegate	为指定的元素添加一个或多个事件，并绑定处理函数，一个事件也可以绑定多个函数
undelegate	删除由delegate()函数绑定的一个或多个事件处理函数
ready	当DOM元素加载完成后绑定处理事件

　　1、绑定事件

　　　　语法：bind(type,[data],fn)　　type参数可以是顶部的22个方法(注意：不能带括号); 参数data是属性值传递给事件对象的额外数据，fn是处理函数。可以bind多个事件，也可以为同一事件绑定多个函数。

　　　　$("#div1").bind("change",function(){ alert("你好！"); })
　　　　$("#div1").bind("click mouseout",function(){ alert("你好！"); })

　　2、切换事件

　　　　语法：hover(fn1,fn2);　　　　鼠标移入执行第一个函数，鼠标移出执行第二个函数。相当于mouseenter与mouseleave。

　　　　$("#div1").hover(function(){alert("鼠标移入我啦");},function(){alert("鼠标移出我啦!");})　　

　　3、顺序执行事件

　　　　语法：toggle(fn1,fn2,fn3...)　  当鼠标单击时，依次执行绑定的事件

　　　　$("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})

　　4、unbind 移除事件

　　　　语法：unbind([type],[fn])　　　　 移除元素已经绑定的事件,type：指定要移除的事件，fn指定要移除的方法。当没有参数时，所有的事件都移除。注意，用live()方法绑定的方法移出不了，live()绑定的方法要用它自己的die()来移出。

　　　　$(":button").unbind();　　   移除按钮的所有事件。
　　　　$(":button").unbind("click");　　   移除按钮的单击事件。
　　　　$(":button").unbind("click",fn1);　　   移除按钮的单击事件中的fn1函数，如果该事件绑定了多个函数，对其他函数没影响。

　　5、one 仅执行一次的事件

　　　　语法：one(type,[data],fn)　　　　绑定一个仅执行一次的事件

　　　　$("#div1").one("click",function(){ alert("我只执行一次!"); })

　　6、trigger DOM加载完毕后自动执行的事件

　　　　语法：trigger(type,[data])　　　　DOM元素加载完成后自动执行

　　　　$("#div1").bind("bclick",function(){ alert("你好"); });
　　　　$("#div1").trigger("bclick");　　　　//注意，trigger一定要放在绑定的事件之后，否则不执行。

　　7、live() DOM根节点绑定事件

　　　　语法：live(type,[fn])　　　　　String,Function

　　　　live(type,[data],false)    String,Array,bool

　　　　live()在根节点绑定事件，通过事件冒泡到DOM根节点($(ducoment))，再对比触发事件的元素来判断事件是否应该执行。效率不高，因此不能完全替代bind()但是有个好处，就是后期加载出来的元素同样能够绑定。但是有个缺点，就是live()方法仅仅能使用CSS选择器选择被绑定元素。

　　　　　　如$('a').live('click', function(){alert("你好!");})　　JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。

　　　　live(type,data,fn)　
　　　　$("#div1").live("click",function(){ alert("你好"); })　　//即使页面一开始不存在id="div1"的元素，是后期AJAX或js加载上去的，但是依然有效。　
　　　　$("#div1").live("click mouseout",function(){ alert("你好"); })　 //可以live()多个事件。　

　　8、die() 解除live()方法绑定的事件　　//绑定与解除是对应的，die()解除不了bind()和delegate绑定的方法。 可以为一个元素live多个事件，也可以为同一事件live多个函数。

　　　　语法die(type,[fn])　　string Function其中Function为可选方法。

　　　　$("#div1").die();
　　　　$("#div1").die("click");
　　　　$("#div1").die("click",fn1);　　//其中fn1为某函数名。如果是绑定的是一个匿名函数，第二个参数用于当为同一事件live了多个函数的时候，解除一个函数对其他函数没影响。

　　9、delegate() 为指定的元素添加一个或多个事件，并绑定处理函数，一个事件也可以绑定多个函数。注意：此函数要1.4.2版添加。delegate()允许在父元素中将时间绑定当前页面还未的元素，这点与Live()类似，但是即使是$(document).delegate()也比live()方法的效率要高，另外delegate()还能将尚未出现的元素绑定到离它更近的父元素上。

　　　　语法：

　　　　delegate(selector,[type],fn)　　　　String String Function　　//selector必须为所选元素的子元素
　　　　delegate(selector,[type],[data],fn)  String String Object Function
　　　　delegate(selector,events)　　　　　 String String

　　　　如：

　　　　$('#container').delegate('a', 'click', function() { alert("你好!") }); 

　　JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

　　　　$("#div1").delegate("#button1","click",function(){ alert("你好啊！"); });　　//注意：#button1必须为#div1的子元素

　　10、undelegate()　 删除有delegate()函数绑定的一个或多个事件处理函数

　　　　　语法：

　　　undelegate(selector,[type])　　　　String String
　　　undelegate(selector,[type],fn)　　  String String Function
　　　undelegate(selector,events)　　　　String String
　　　undelegate(namespace)　　　　　　String

　　11、ready()　　当DOM元素加载完成后绑定处理事件

　　$(document).ready()