Jquery事件(Events)介绍

最新推荐文章于 2024-07-30 11:51:58 发布

萧邀人

最新推荐文章于 2024-07-30 11:51:58 发布

阅读量1.1k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

测试的HTML代码：

< input type = " button " value = " Click Me " id = " input_button " />

页面载入：

ready(fn)：在HTML完全载入以后执行的函数，相当于JS中加载在标签上面的onload事件，如果已经在标签有了onload事件，则此函数不会运行。

< script >
$ ( document ) . ready ( function (){
alert ( ' Page Ready! ' ) ; // 显示Page Ready!
}) ;
< / script>

事件处理：

bind(type, data, fn)：bind()函数对所有匹配的对象绑定事件。bind()有三个参数，第一个参数是事件名，第二个参数可选，表示event.data的值，第三个参数表示处理该事件的函数。

< script >
$ ( ' #input_button ' ) . bind ( ' click ' , ' any_data ' , function ( e ){
alert ( e . data ) ; // 显示 any_data
alert ( e . pageX ) ; // 显示鼠标点击按钮是页面X坐标的值
})
< / script>

one(type, data, fn)：onc()函数的作用和参数的作用和bind()函数相同，但是onc()只执行一次事件。

< script >
$ ( ' #input_button ' ) . one ( ' click ' , function ( e ){
alert ( ' You Just Can Click Me Once! ' ) ;
})
//点击按钮以后显示You Just Can Click Me Once!
< / script>

trigger(type, data)：触发匹配元素上的某一类事件。第一个参数表示需要触发的事件类型，第二个参数的使用在1.2.2b2上面没有测试成功，同样triggerHandler()函数的功能也没有测试成功，所以暂时不介绍。

< script >
$ ( ' #input_button ' ) . bind ( ' click ' , function (){
alert ( ' Who Clicked Me! ' ) ;
})
$ ( ' #input_button ' ) . trigger ( ' click ' ) ;
//不用点击按钮，就会显示Who Clicked Me!
< / script>

unbind(type, data)：取消对一个事件的绑定。两个参数都是可选的，第一个参数表示取消绑定事件的类型，缺省情况下会取消所有的事件，第二个参数的使用没有测试成功。

< script >
$ ( ' #input_button ' ) . bind ( ' click ' , function (){
alert ( ' Who Will Click Me! ' ) ;
})
$ ( ' #input_button ' ) . unbind ( ' click ' ) ;
// 没有任何事件会发生
< / script>

交替执行：

hover(over, out)：模拟一个hover，后面两个参数作为onmouseover和onmouseout事件的时候分别运行的函数。

< script >
$ ( " #input_button " ) . hover (
   function ()
   {
   alert ( ' I am In! ' ) ;
   } ,
   function ()
   {
   alert ( ' I am Out! ' ) ;
   }
) ;
//鼠标放上去的时候显示“I am In!” 鼠标移出的时候显示“I am Out!”
< / script>

toggle(fn, fn)：在一个对象上面绑定两个交替运行的click事件，后面的两个参数分别是两次事件所运行的函数。

< script >
$ ( " #input_button " ) . toggle (
   function ()
   {
   alert ( ' Click Me odd! ' ) ;
   } ,
   function ()
   {
   alert ( ' Click Me even! ' ) ;
   }
) ;
//第一次点击的时候显示“Click Me odd!”，第二次点击的时候显示“Click Me even!”。
< / script>

事件：

blur()：触发匹配对象的onblur（失去焦点）的事件。
blur(fn)：为匹配的对象加载onblur事件所触发的函数。

< script >
$ ( " #input_button " ) . click ( function (){
this . blur () ;
})
$ ( " #input_button " ) . blur ( function (){
alert ( ' You Blur Me! ' )
})
//点击按钮以后，会立即失去焦点，并触发失去焦点的函数。
< / script>

change()：触发匹配的对象value被修改时的onchange事件。
change(fn)：为匹配的对象加载value被修改时onchange触发的函数。

< script >
$ ( " #input_button " ) . click ( function (){
$ ( " #input_button " ) . change () ;
})
$ ( " #input_button " ) . change ( function (){
alert ( ' You Change Me? ' )
})
//点击按钮以后，显示You Change Me?
< / script>

click()：触发匹配的对象的onclick（单击）事件。
click(fn)：为匹配的对象加载onclick事件时触发的函数。

< script >
$ ( " #input_button " ) . click ( function (){
alert ( ' Who Clicked Me? ' )
})
$ ( " #input_button " ) . click () ;
//在页面载入的时候，会显示“Who Clicked Me?”
< / script>

dblclick()：触发匹配的对象的ondbclick（双击）事件。
dblclick(fn)：为匹配的对象加载ondbclick事件时触发的函数。

< script >
$ ( " #input_button " ) . dblclick ( function (){
alert ( ' Who Double Clicked Me? ' )
})
$ ( " #input_button " ) . dblclick () ;
//在页面载入的时候，会显示“Who Double Clicked Me?”
< / script>

error()：触发匹配的对象的onerror（错误）事件。
error(fn)：为匹配的对象加载onerror事件时触发的函数。

< script >
$ ( " #input_button " ) . error ( function (){
alert ( ' Am I Error? ' )
})
$ ( " #input_button " ) . error () ;
//在页面载入的时候，会显示“Am I Error?”
< / script>

focus()：触发匹配的对象的onfocus（获取焦点）事件。
focus(fn)：为匹配的对象加载onfocus事件时触发的函数。

< script >
$ ( " #input_button " ) . focus ( function (){
alert ( ' You Focus Me! ' ) ;
alert ( error ) ; // 制造一个错误，不然会死循环
})
$ ( " #input_button " ) . focus () ;
//在页面载入的时候，会显示“You Focus Me!”
< / script>

keydown()：触发匹配的对象的onkeydown（键按下）事件。
keydown(fn)：为匹配的对象加载onkeydown事件时触发的函数。

< script >
$ ( " #input_button " ) . keydown ( function (){
alert ( ' You Keydown? ' ) ;
})
$ ( " #input_button " ) . keydown () ;
//在页面载入的时候，会显示“You Keydown?”
< / script>

keypress()：触发匹配的对象的onkeypress（按键）事件。
keypress(fn)：为匹配的对象加载onkeypress事件时触发的函数。

< script >
$ ( " #input_button " ) . keypress ( function (){
alert ( ' You keypressed? ' ) ;
})
$ ( " #input_button " ) . keypress () ;
//在页面载入的时候，会显示“You keypressed?”
< / script>

keyup()：触发匹配的对象的onkeyup（按键）事件。
keyup(fn)：为匹配的对象加载onkeyup事件时触发的函数。

< script >
$ ( " #input_button " ) . keyup ( function (){
alert ( ' You keyup? ' ) ;
})
$ ( " #input_button " ) . keyup () ;
//在页面载入的时候，会显示“You keyup?”
< / script>

load(fn)：为匹配的对象加载onload（frame，windows，image载入）事件时触发的函数。

< script >
$ ( window ) . load ( function (){
alert ( ' page load over! ' ) ;
})
//在页面载入的时候，会显示“page load over!”
< / script>

mousedown(fn)：为匹配的对象加载onmousedown（鼠标键按下）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . mousedown ( function (){
alert ( ' Your Mouse Down! ' ) ;
})
//鼠标在按钮上按下的时候显示“Your Mouse Down!”
< / script>

mousemove(fn)：为匹配的对象加载onmousemove（鼠标在对象上面移动）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . mousemove ( function (){
alert ( ' Your Mouse Move! ' ) ;
})
//鼠标在按钮上移动的时候显示“Your Mouse Move!”
< / script>

mouseout(fn)：为匹配的对象加载onmouseout（鼠标在对象上面移动）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . mouseout ( function (){
alert ( ' Your Mouse Out! ' ) ;
})
//鼠标移出按钮的时候显示“Your Mouse Out!”
< / script>

mouseover(fn)：为匹配的对象加载onmouseover（鼠标移入）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . mouseover ( function (){
alert ( ' Your Mouse Over! ' ) ;
})
//鼠标移入按钮的时候显示“Your Mouse Over!”
< / script>

mouseup(fn)：为匹配的对象加载onmouseup（鼠标键弹起）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . mouseup ( function (){
alert ( ' Your Mouse Up! ' ) ;
})
//鼠标在按钮上弹起的时候显示“Your Mouse Up!!”
< / script>

resize(fn)：为匹配的对象加载onresize（对象大小调整）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . resize ( function (){
alert ( ' Your Resize Me! ' ) ;
})
$ ( ' #input_button ' ) . resize () ;
//在页面载入的时候，会显示“Your Resize Me!”
< / script>

scroll(fn)：为匹配的对象加载onscroll（滚动条拖动）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . scroll ( function (){
alert ( ' Your Scroll Me! ' ) ;
})
$ ( ' #input_button ' ) . scroll () ;
//在页面载入的时候，会显示“Your Scroll Me!”
< / script>

focus()：触发匹配的对象的onselect（文本被选择）事件。
select(fn)：为匹配的对象加载onselect事件时触发的函数。

< script >
$ ( ' #input_button ' ) . select ( function (){
alert ( ' Your Selected Me! ' ) ;
})
$ ( ' #input_button ' ) . select () ;
//在页面载入的时候，会显示“Your Selected Me!”
< / script>

submit()：触发匹配的对象的onsubmit（表单提交）事件。
select(fn)：为匹配的对象加载onsubmit事件时触发的函数。

< script >
$ ( ' #input_button ' ) . select ( function (){
alert ( ' Your Submit Form! ' ) ;
})
$ ( ' #input_button ' ) . select () ;
//在页面载入的时候，会显示“Your Submit Form!”
< / script>

unload(fn)：为匹配的对象加载onsubmit（页面关闭）事件时触发的函数。

< script >
$ ( ' #input_button ' ) . unload ( function (){
alert ( ' Your Closed Page! ' ) ;
})
$ ( ' #input_button ' ) . unload () ;
//在页面载入的时候，会显示“Your Closed Page!”
< / script>

转自：http://blog.163.com/xyz_1112/blog/static/386944022008316847339/