标签:
如果使用原生JavaScript编程,在不同浏览器获取事件对象的方法并不相同。例如,在IE浏览器中,程序可通过隐式的、全局event对象来获取对象;在Firefor、Opera等浏览器中,程序则通过事件处理函数的第一个参数来获取事件。
jQuery消除了不同浏览器上事件差异。在jQuery中,事件对象总是作为参数传入事件处理函数,不仅如此,原生事件的大量属性也会被复制到jQuery的事件中。
jQuery事件大致包含了以下几种属性和方法:
1) currentTarget:代表在事件冒泡阶段中事件当前所处的DOM元素。
2) data:代表通过bind()、on()、delegate()等方法绑定事件处理函数时传入的data参数。
3) delegateTarget:返回在jQuery中绑定事件处理函数的对象
4) isDefaultPrevented():返回是否调用了事件对象的preventDefault()方法,即是否阻止了默认行为。
5) isImmediatePropagationStopped():返回是否调用了事件对象stopImmediatePropagation()方法,即是否立即 停止事件传播。
6) isPropagationStopped():返回是否调用事件对象的stopProgapation(),即是否阻止事件传播。
7) pageX:返回鼠标点击距离文档左边界的距离。
8) pageY:返回鼠标点距离文档边界的距离。
9) preventDefault():调用该方法阻止事件的默认行为。
10) relatedTarget:返回参与事件的所有其他DOM元素。
11) result:返回该事件触发的事件处理函数执行后的返回值。
12) stopImmediatePropagation():调用该方法立即停止事件传播。
13) stopPropagation():调用该方法停止事件传播。
14) target:返回触发该事件的初始化事件源。
15) timestamp:返回1970-01-01到浏览器创建该事件的时间差,以这毫秒为单位。
16) type:返回事件的类型。
17) which:对于鼠标 、键盘事件,该属性返回激发该事件的鼠标键或键盘键。
下面开发了一个键盘控制“n飞机移动的例子,为了键盘控制飞机移动,程序需要根据激发键盘事件的按键进行相应处理。
<!DOCTYPE html> <html> <head> <meta name="author" content="OwenWilliam" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 访问jQuery事件对象 </title> </head> <body> <script type="text/javascript" src="../jquery-1.8.0.js"> </script> <script type="text/javascript"> // 指定页面加载完成后执行该函数 $(function() { // 获取页面上包含飞机图片的div元素 var target = $("body>div:first"); // 为body元素的keydown事件绑定事件处理函数 $("body").keydown(function(event) { switch(event.which) { // 按下向左键 case 37: target.offset({left:target.offset().left - 4 , top:target.offset().top}); break; // 按下向上键 case 38: target.offset({left:target.offset().left , top:target.offset().top - 4}); break; // 按下向右键 case 39: target.offset({left:target.offset().left + 4 , top:target.offset().top}); break; // 按下向下键 case 40: target.offset({left:target.offset().left , top:target.offset().top + 4}); break; } }); }) </script> <div style="position:absolute;"> <img src="plane.png" alt="飞机"/></div> </body> </html>
标签:
原文地址:http://blog.csdn.net/owen_william/article/details/51339887