jQuery参考之jQuery 事件 方法

jQuery 事件方法

事件方法触发器或添加一个函数到被选元素的事件处理程序。

下面的表格列出了所有用于处理事件的 jQuery 方法。

方法描述
bind()

向元素添加事件处理程序

bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

自 jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的首选方法。

blur()

添加/触发 blur 事件

当元素失去焦点时,发生 blur 事件。

change()

添加/触发 change 事件

当元素的值改变时发生 change 事件(仅适用于表单字段)。

click()

添加/触发 click 事件

当单击元素时,发生 click 事件。

dblclick()添加/触发 double click 事件

当双击元素时,会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数

提示:dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素,则会产生问题。

delegate()

向匹配元素的当前或未来的子元素添加处理程序

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

自 jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的首选方法。

die()

在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序

die() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。请使用 off() 方法代替。

die() 方法移除通过 live() 方法向被选元素添加的一个或多个事件处理程序。

error()

在版本 1.8 中被废弃。添加/触发 error 事件

当元素遇到错误时(当元素没有正确载入时),发生 error 事件。

提示:该方法是 bind('error', handler) 的简写方式。

event.currentTarget在事件冒泡阶段内的当前 DOM 元素,通常等于 this
event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget

返回当前调用的 jQuery 事件处理程序所添加的元素

该属性对于由 on() 方法添加的委托事件非常有用,事件处理程序是在元素的祖先被处理时添加的。

提示:如果事件直接绑定到元素且没有委托发生,则 event.delegateTarget 等同于 event.currentTarget.

可以参考

delegateTarget 和带委托的 currentTarget 之间的不同
演示 delegateTarget 和当委托发生时的 currentTarget 之间的不同。

对于直接绑定事件,delegateTarget 和 currentTarget 是相等的
演示对于直接绑定事件,delegateTarget 和 currentTarget 是相等的。

event.isDefaultPrevented()返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace

返回当事件被触发时指定的命名空间

该属性可被插件作者用来根据所使用的命名空间以不同的方式处理任务。

提示:对于 jQuery 而言,以下划线开始的命名空间会被保留。

event.pageX

返回相对于文档左边缘的鼠标位置

提示:该事件属性通常与 event.pageY 属性一起使用。

event.pageY返回相对于文档上边缘的鼠标位置
event.preventDefault()阻止事件的默认行为
event.relatedTarget返回当鼠标移动时哪个元素进入或退出
event.result包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()阻止其他事件处理程序被调用
event.stopPropagation()阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知
event.target

返回哪个 DOM 元素触发事件

这对比较 event.target 和 this 是非常有用的,以便判断事件是否因事件冒泡被处理。

event.timeStamp返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type返回哪种事件类型被触发
event.which返回指定事件上哪个键盘键或鼠标按钮被按下
focus()

添加/触发 focus 事件

当元素获得焦点时,发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

focusin()

添加事件处理程序到 focusin 事件

当元素(或在其内的任意元素)获得焦点时发生 focusin 事件。

当在元素或在其内的任意元素上发生 focus 事件时,focusin() 方法添加要运行的函数。

focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。

提示:当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

提示:该方法通常与 focusout() 方法一起使用。

focusout()

添加事件处理程序到 focusout 事件

当元素(或在其内的任意元素)失去焦点时发生 focusout 事件。

当在元素或在其内的任意元素上发生 focusout 事件时,focusout() 方法添加要运行的函数。

blur() 方法不同的是,focusout() 方法在任意子元素失去焦点时也会触发。

提示:该方法通常与 focusin() 方法一起使用。

hover()

添加两个事件处理程序到 hover 事件

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);

当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

keydown()

添加/触发 keydown 事件

在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码

keypress()

添加/触发 keypress 事件

在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

keyup()

添加/触发 keyup 事件

用户松开某一个按键时触发,与keydown相对,返回键盘代码.

live()

在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素

live() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。请使用 on() 方法代替。

live() 方法为被选元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 die() 方法。

load()

在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件

load() 方法添加事件处理程序到 load 事件。

当指定的元素已加载时,会发生 load 事件。

该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)以及 window 对象。

根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。

注意:还存在一个名为 load() 的 jQuery AJAX 方法。根据不同的参数决定调用哪个方法。

mousedown()

添加/触发 mousedown 事件

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

提示:该方法通常与 mouseup() 方法一起使用。

mouseenter()

添加/触发 mouseenter 事件

当鼠标指针穿过元素时,会发生 mouseenter 事件。

mouseleave()

添加/触发 mouseleave 事件

当鼠标指针离开元素时,会发生 mouseleave 事件。

mousemove()

添加/触发 mousemove 事件

当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。

注意:用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

mouseout()

添加/触发 mouseout 事件

当鼠标指针离开被选元素时,会发生 mouseout 事件。

注意: mouseleave 事件不同,mouseout 事件在鼠标指针离开被选元素或任意子元素时都会被触发,mouseleave 事件只有在鼠标指针离开被选元素时被触发。

提示:该事件通常与 mouseover 事件一起使用。

可以参考实例

mouseout() 与 mouseleave() 之间的不同

演示 mouseout() 与 mouseleave() 之间的不同。

mouseover()

添加/触发 mouseover 事件

当鼠标指针位于元素上方时,会发生 mouseover 事件。

注意:mouseenter 事件不同,mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发,mouseenter 事件只有在鼠标指针进入被选元素时被触发。

提示:该事件通常与 mouseout 事件一起使用。

可以参考实例

mouseover() 与 mouseenter() 之间的不同
演示 mouseover() 与 mouseenter() 之间的不同。

mouseup()

添加/触发 mouseup 事件

当在元素上松开鼠标按钮时,会发生 mouseup 事件。

提示:该方法通常与 mousedown() 方法一起使用。

off()移除通过 on() 方法添加的事件处理程序
on()

向元素添加事件处理程序

jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()

接受一个已有的函数,并返回一个带特定上下文的新的函数

该方法通常用于向上下文指向不同对象的元素添加事件。

提示:如果您绑定从 $.proxy 返回的函数,jQuery 仍然可以通过传递的原先的函数取消绑定正确的函数。

ready()规定当 DOM 完全加载时要执行的函数
resize()

添加/触发 resize 事件

当调整浏览器窗口大小时,发生 resize 事件。

scroll()

添加/触发 scroll 事件

当用户滚动指定的元素时,会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

select()

添加/触发 select 事件

当 textarea 或文本类型的 input 元素中的文本被选择(标记)时,会发生 select 事件。

submit()

添加/触发 submit 事件

当提交表单时,会发生 submit 事件。

该事件只适用于 <form> 元素。

如何使用 event.preventDefault() 方法阻止表单被提交。参考以下实例:

阻止 submit 按钮的默认行为

toggle()

在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数

当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。

注意:还存在一个名为 toggle() 的 jQuery 效果方法。根据不同的参数决定调用哪个方法。

trigger()

触发绑定到被选元素的所有事件

trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。

该方法与 triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。

triggerHandler()

触发绑定到被选元素的指定事件上的所有函数

triggerHandler() 方法触发被选元素上指定的事件。

该方法与 trigger() 方法类似,不同的是 trigger() 也触发事件的默认行为(比如表单提交)。

unbind()

从被选元素上移除添加的事件处理程序

该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

该方法也可以通过 event 对象取消绑定的事件处理程序。该方法也用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。

注意:如果未规定参数,则 unbind() 方法会删除指定元素的所有事件处理程序。

注意:unbind() 方法适用于任意由 jQuery 添加的事件处理程序。

自 jQuery 版本 1.7 起,on()off() 方法是在元素上添加和移除事件处理程序的首选方法。

undelegate()

从现在或未来的被选元素上移除事件处理程序

undelegate() 方法移除一个或多个由 delegate() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起,on()off() 方法是添加和移除元素上的事件处理程序的首选方法。

unload()

在版本 1.8 中被废弃。添加事件处理程序到 unload 事件

当用户离开页面时,会发生 unload 事件。

当发生以下情况下,会触发 unload 事件:

  • 点击某个离开页面的链接
  • 在地址栏中键入了新的 URL
  • 使用前进或后退按钮
  • 关闭浏览器窗口
  • 重新加载页面

unload() 方法规定当 unload 事件发生时会发生什么。

unload() 方法只应用于 window 对象。

注意:unload 事件在不同浏览器中效果不一样,请确保使用前在所有浏览器测试该方法。

转载于 https://www.w3cschool.cn/jquery/jquery-ref-events.html

常见 DOM 事件:

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleave blurunload

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值