jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。
bind() 方法
向 <p> 元素添加一个单击事件:
$("p").bind("click",function(){ alert("这个段落被点击了。"); });
定义和用法
bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。
自 jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的首选方法。
语法
参数 | 描述 |
---|---|
event | 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
blur() 方法
添加函数到 blur 事件。当 <input> 字段失去焦点时发生 blur 事件:
$("input").blur(function(){ alert("输入框失去了焦点"); });
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。
提示:该方法常与 focus() 方法一起使用。
语法
为被选元素触发 blur 事件:
添加函数到 blur 事件:
参数 | 描述 |
---|---|
function | 可选。规定当 blur 事件发生时运行的函数。 |
change() 方法
当 <input> 字段改变时警报文本:
$("input").change(function(){ alert("文本已被修改"); });
定义和用法
当元素的值改变时发生 change 事件(仅适用于表单字段)。
change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。
注意:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发
语法
触发被选元素的 change 事件:
添加函数到 change 事件:
$(selector).change(function)
参数 | 描述 |
---|---|
function | 可选。规定针对被选元素当 change 事件发生时运行的函数。 |
click() 方法
单击 <p> 元素时警报文本:
$("p").click(function(){ alert("段落被点击了。"); });
定义和用法
当单击元素时,发生 click 事件。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
语法
触发被选元素的 click 事件:
添加函数到 click 事件:
参数 | 描述 |
---|---|
function | 可选。规定当 click 事件发生时运行的函数。 |
dbclick() 方法
双击 <p> 元素时警报文本:
$("p").dblclick(function(){ alert("这个段落被双击。"); });
定义和用法
当双击元素时,触发 dblclick 事件。
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。
提示:dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素,则会产生问题。
语法
触发被选元素的 dblclick 事件:
添加函数到 dblclick 事件:
参数 | 描述 |
---|---|
function | 可选。规定当 dblclick 事件发生时运行的函数。 |
delegate() 方法
当单击 <div> 元素内部的 <p> 元素时,改变所有 <p> 元素的背景颜色:
$("div").delegate("p","click",function(){ $("p").css("background-color","pink"); });
定义和用法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
自 jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的首选方法。
语法
参数 | 描述 |
---|---|
childSelector | 必需。规定要添加事件处理程序的一个或多个子元素。 |
event | 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
die() 方法
移除所有通过 live() 方法向 <p> 元素添加的事件处理程序:
$("p").die();
定义和用法
die() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。请使用 off() 方法代替。
die() 方法移除通过 live() 方法向被选元素添加的一个或多个事件处理程序。
语法
参数 | 描述 |
---|---|
event | 必需。规定要移除的一个或多个事件处理程序。 由空格分隔多个事件值。必须是有效的事件。 |
function | 可选。规定要移除的特定函数。 |
error() 方法
如果 image 元素遇到错误,把它替换为文本:
$("img").error(function(){ $("img").replaceWith("<p>图片加载错误!</p>"); });
定义和用法
error() 方法在 jQuery 版本 1.8 中被废弃。
当元素遇到错误时(当元素没有正确载入时),发生 error 事件。
error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
提示:该方法是 bind('error', handler) 的简写方式。
语法
触发被选元素的 error 事件:
添加函数到 error 事件:
参数 | 描述 |
---|---|
function | 可选。规定当 error 事件发生时运行的函数 |
event.currentTarget属性
event.currentTarget 通常等于 this:
$("h1,h2,p").click(function(event){ alert(event.currentTarget === this); });
定义和用法
event.currentTarget 属性是在事件冒泡阶段内的当前 DOM 元素,通常等于 this
语法
参数 | 描述 |
---|---|
event | 必需。event 参数来自事件绑定函数。 |
jquery方法与属性列表:
方法 | 描述 |
---|---|
bind() | 向元素添加事件处理程序 |
blur() | 添加/触发失去焦点事件 |
change() | 添加/触发 change 事件 |
click() | 添加/触发 click 事件 |
dblclick() | 添加/触发 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
event.currentTarget | 在事件冒泡阶段内的当前 DOM 元素 |
event.data | 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 |
event.delegateTarget | 返回当前调用的 jQuery 事件处理程序所添加的元素 |
event.isDefaultPrevented() | 返回指定的 event 对象上是否调用了 event.preventDefault() |
event.isImmediatePropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() |
event.isPropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopPropagation() |
event.namespace | 返回当事件被触发时指定的命名空间 |
event.pageX | 返回相对于文档左边缘的鼠标位置 |
event.pageY | 返回相对于文档上边缘的鼠标位置 |
event.preventDefault() | 阻止事件的默认行为 |
event.relatedTarget | 返回当鼠标移动时哪个元素进入或退出 |
event.result | 包含由被指定事件触发的事件处理程序返回的最后一个值 |
event.stopImmediatePropagation() | 阻止其他事件处理程序被调用 |
event.stopPropagation() | 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知 |
event.target | 返回哪个 DOM 元素触发事件 |
event.timeStamp | 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 |
event.type | 返回哪种事件类型被触发 |
event.which | 返回指定事件上哪个键盘键或鼠标按钮被按下 |
event.metaKey | 事件触发时 META 键是否被按下 |
focus() | 添加/触发 focus 事件 |
focusin() | 添加事件处理程序到 focusin 事件 |
focusout() | 添加事件处理程序到 focusout 事件 |
hover() | 添加两个事件处理程序到 hover 事件 |
keydown() | 添加/触发 keydown 事件 |
keypress() | 添加/触发 keypress 事件 |
keyup() | 添加/触发 keyup 事件 |
live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
mousedown() | 添加/触发 mousedown 事件 |
mouseenter() | 添加/触发 mouseenter 事件 |
mouseleave() | 添加/触发 mouseleave 事件 |
mousemove() | 添加/触发 mousemove 事件 |
mouseout() | 添加/触发 mouseout 事件 |
mouseover() | 添加/触发 mouseover 事件 |
mouseup() | 添加/触发 mouseup 事件 |
off() | 移除通过 on() 方法添加的事件处理程序 |
on() | 向元素添加事件处理程序 |
one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
$.proxy() | 接受一个已有的函数,并返回一个带特定上下文的新的函数 |
ready() | 规定当 DOM 完全加载时要执行的函数 |
resize() | 添加/触发 resize 事件 |
scroll() | 添加/触发 scroll 事件 |
select() | 添加/触发 select 事件 |
submit() | 添加/触发 submit 事件 |
toggle() | 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数 |
trigger() | 触发绑定到被选元素的所有事件 |
triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
unbind() | 从被选元素上移除添加的事件处理程序 |
undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
contextmenu() | 添加事件处理程序到 contextmenu 事件 |
$.holdReady() | 用于暂停或恢复.ready() 事件的执行 |