jQuery之事件even

jQuery之事件       W3C：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

一、事件列表

　　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()　　　　　　 当页面卸载时触发。　　

2016-11-17更新

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

二、事件常用方法

事件名称	说明
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()

作者：逆心

出处：http://www.cnblogs.com/kissdodog/archive/2012/12/08/2808799.html