jquey常用事件

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

(二)、事件经常用法

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 ) . l i v e ( c l i c k , f u n c t i o n ( ) a l e r t ( " ! " ) ; )     J Q u e r y a l e r t ('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

如:

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲container').del…(‘#container’),并使用click事件和’a’这一CSS选择器作为參数把alert函数绑定到KaTeX parse error: Expected 'EOF', got '#' at position 3: (‘#̲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()

猜你喜欢

转载自blog.csdn.net/wanwenjieGood/article/details/83622690