深入理解jQuery 事件处理
浏览器的事件模型
DOM第0级事件模型
1.Event实例
他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节,比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击了哪个键。
2.事件冒泡
当触发dom树中一个元素上的事件时,事件模型会检查这个元素是否已经创建了特定的事件处理器。如果是,就会调用已创建的事件处理器。然后,事件模型会检查目标元素的父元素,看其是否已经为此事件类型创建了处理器。如果是,就调用已创建的处理器,之后检查它的父元素,以及父元素的父元素,以此类推,直到dom树的顶部。
DOM第2级事件模型
IE事件模型
jQuery事件模型
使用jQuery绑定事件处理器
<html> <head> <title>jQueryEventsExample</title> <scripttype="text/javascript"src="../scripts/jquery-1.7.1.js"></script> <scripttype="text/javascript"> $(function(){ $('#example') .bind('click',function(event){ alert('BOOMonce!'); }) .bind('click',function(event){ alert('BOOMtwice!'); }) .bind('click',function(event){ alert('BOOMthreetimes!'); }); }); </script> </head> <body> <imgid="example"src="example.jpg"/> </body> </html>
bind(eventType,data,handler);bind(eventMap)
可以为事件名称添加以圆点分隔的后缀来指定命名空间,以批量操作事件处理器。
可以通过单个bind()方法来为一个元素绑定多个事件。
$('.whatever').bind({ click:function(event){/*handle*/}, mouseenter:function(event){/*handle*/}, mouseleave:function(event){/*handle*/} })
特定的事件绑定:
blurchangeclickdblclickerrorfocusfocusinfocusoutkeydownkeypresskeyuploadmousedownmouseentermouseleavemousemovemouseoutmouseovermouseupreadyresizescrollselectsubmitunload
当使用这些便捷方法时,event.data值是只读的。他们有一个参数listener函数,表示事件处理器。
focusinfocusout
one(eventType,data,listener)
删除事件处理器
unbind(eventType,listener);unbind(event)
删除特定的事件处理器
删除命名空间中的所有事件处理器
$('*').unbind('.fred')Event实例
独立于浏览器的jQuery.Event属性和方法
触发事件处理器
trigger(eventType,data)
triggerHandler(eventType,data)
触发的便捷方法
blur()change()click()dblclick()error()focus()focusin()focusout()keydown()keypress()keyup()load()mousedown()mouseenter()mouseleave()mousemove()mouseout()mouseover()mouseup()resize()scroll()select()submit()unload()
其他事件相关的方法
1.起切换作用的监听器
toggle(listener1,listener2,...)
2.在元素上悬停鼠标
hover(enterHandler,leaveHandler);hover(handler)
充分利用(更多的)事件
过滤大的数据集合
通过模板复制创建元素
建立主体标记
添加新的过滤器
添加限定控件
删除不需要的过滤器和其他任务
以上这篇深入理解jQuery事件处理就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。