jQuery事件

事件处理

方法描述
bind(eventType, function)

bind(eventType, data, function)

为jQuery对象内含元素添加一个事件处理函数,支持可选的data参数
bind(eventType, boolean)(可用于)生成一个总是返回false的事件处理函数以阻止事件的默认行为。这个布尔型参数决定是否允许事件冒泡
bind(map)使用JavaScript的对象字面量map为jQuery对象内含元素一次添加多个事件处理函数
one(eventType, function)为jQuery对象内含元素添加一个事件处理函数,支持可选的data参数;该事件处理函数一旦被触发执行就会自动撤销绑定(至多执行一次)
unbind()撤销之前绑定在jQuery对象内含元素上的所有处理函数
unbind(eventType)撤销之前绑定在jQuery对象内含元素上的某一事件的处理函数
unbind(eventType, boolean)解除(为抑制事件默认行为而)绑定在jQuery对象内含元素上的总是返回false的事件处理函数
unbind()移除Event对象对应的事件处理函数

当jQuery调用事件处理函数时,this变量被设置为时间绑定的元素。传递给事件处理函数的Event对象时jQuery加工之后的Event对象,并非原生DOM标准中定义的Event对象。

jQuery Event对象成员一览表

名字描述返回值
currentTarget返回正在处理(响应)该事件的元素HTMLElement
Data返回绑定时间时传递给bind()方法的可选data对象Object
isDefaultPrevented()若已经调用过preventDefault()方法,返回trueBoolean
isImmediatePropagation()若已经调用过stopImmediatePropagation()方法,返回trueBoolean
isPropagationStopped()若已经调用过stopPropagation()方法,返回trueBoolean
originalEvent返回未经jQuery加工的原始Dom Event对象Event
pageX

pageY

返回相对于页面左上角鼠标位置number
preventDefault()阻止当前事件的默认行为void
relatedTarget仅对鼠标事件有效,返回该鼠标事件有关的元素(随鼠标事件的类型变化而变化)HTMLElement
Result返回处理该事件的最后一个事件处理函数的返回值Object
stopImmediatePropagation()立即阻止调用当前事件的其他事件处理函数void
stopPropagation()阻止事件冒泡,但允许正在响应事件的元素处理该事件void
Target返回触发事件的元素HTMLElement
timestamp返回事件发生的时间number
Type返回事件类型string
Which在键盘和鼠标事件中,返回用户按下的键或者鼠标按钮number

阻止默认事件

调用e.preventDefault()方法。

$().bind("",false);

return false;

动态绑定事件处理函数

bind()方法绑定的事件处理函数不会应用到后来添加到Dom的新元素上。

支持自动绑定事件处理函数的方法

方法描述
on(events, selector, data, function)

on(map, selector, data)

为匹配选择器的元素(现在匹配或将来匹配)定义处理函数jQuery
off(events, selector, data, function)

off(map, selector, data)

撤销使用on方法绑定的所有事件处理函数
deledate(selector, eventType, function)

deledate(selector, eventType, data, function)

deledate(selector, map)

如果jQuery对象包含元素内有匹配(或将来匹配)制定选择器的元素,则为其绑定事件处理函数
undeledate()

undeledate(selector, eventType)

撤销delegate方法绑定且匹配选择器与事件类型的事件处理函数
        on方法并非直接把事件处理函数绑定到目标元素。实际上,他是在父级对象上绑定了一个事件处理函数,该函数在事件发生时,检查触发事件的元素是否匹配选择器。一旦事件与元素匹配成功,就调用绑定的事件处理函数。

人工调用事件处理函数

用于人工调用事件处理函数的方法

方法描述
trigger(eventType)触发绑定在jQuery对象内含元素特定事件类型(由eventType指定)上的事件处理函数
trigger(Event)触发绑定在jQuery对象内含元素特定事件类型(Event指定)上的事件处理函数
triggerHandler(eventType)触发绑定在jQuery对象内含的第一个元素上的事件处理函数,既不冒泡,也不实施事件的默认行为

如果需要一个事件处理函数内部调用其他元素的(同类型)事件处理函数,使用Event对象指定要人工调用的其他元素的事件处理函数。

1

2

3

4

5

6

7

8

$("#row1 img").bind("mouseenter",function(){

$(this).css("border","thick solid red");

});

$("#row2 img").bind("mouseenter",function(e){

$(this).css("border","thick solid blue");

$("#row1 img").trigger(e);

});

triggerHandler方法

triggerHandler方法不会执行事件的默认行为,也不允许事件沿DOM树向上冒泡。而且,不同于trigger方法,triggerHandler方法只针对jQuery对象中包含的第一个元素调用事件处理函数。

triggerHandler方法的返回值是事件处理函数的返回值(而不是Jquery对象),因此不能在调用triggerHandler方法后链式调用jQuery方法。

事件快捷方法

1

2

3

$("img").mouseenter(function(){

$(this).css("border","thick solid red");

});

只要调用事件快捷方法时不带任何参数,就等同于调用相应的trigger方法。

1

2

3

4

5

6

7

8

$("img").mouseenter(function(){

$(this).css("border","thick solid red");

});

$("#btn").click(function(e){

$("img").mouseenter();

e.preventDefault();

});

document对象事件快捷方法
方法描述
load(function)即load事件,在页面中的子元素及资源文件载入完成时触发
ready(function)在页面中的元素已经处理完成,DOM就绪触发
unload(function)即unload事件,当用户离开当前页面时触发
浏览器事件快捷方法
方法描述
error(function)即error事件,在载入外部资源文件出错时触发(如载入图片出错)
resize(function)即resize事件,当浏览器窗口大小发生改变时触发
scroll(function)即scroll事件,当用户拖动滚动条时触发
鼠标事件快捷方法
方法描述
click(function)即click事件,在用户单击鼠标按钮时触发
dbclick(function)即dbclick事件,在用户双击鼠标按钮时触发
focusin(function)即focusin事件,在元素得到焦点时触发
focusout(function)即focusout事件,在元素失去焦点时触发
hover(function)

hover(function, function)

在鼠标进入或离开元素时触发,若只指定一个事件处理函数,则鼠标进入或离开元素时都会触发该函数的执行
mousedown(function)即mousedown事件,当在某元素上按下鼠标时触发
mouseenter(function)即mouseenter事件,当鼠标进入某元素显示区域时触发
mouseleave(function)即mouseleave事件,当鼠标离开某元素显示区域时触发
mousemove(function)即mousemove事件,当鼠标在某元素显示区域内移动时触发
mouseout(function)即mouseout事件,当鼠标离开某元素显示区域时触发
mouseover(function)即mouseover事件,当鼠标进入某元素显示区域时触发
mouseup(function)即mouseup事件,当鼠标释放鼠标按钮时触发
hover(function, function),第一个函数响应mouseenter事件,第二个函数响应mouseleave事件。
表单事件快捷方式
方法描述
blur(function)即blur事件,在元素失去焦点时触发
change(function)即change事件,当元素的值发生变化时触发
focus(function)即focus事件,在元素得到焦点时触发
select(function)即select事件,在用户选中某个可选值时触发
submit(function)即submit事件,当用户提交表单时触发
键盘事件快捷方式
方法描述
keydown(function)即keydown事件,当用户按下一个键后触发
keypress(function)即keypress事件,当用户按下一个键并释放(弹起)后触发
keyup(function)即keyup事件,当用户释放一个(被按下的)键时触发

来自为知笔记(Wiz)