介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了!

jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。

1.event.type属性
该方法作用是可以获取到时间的类型

$("a").click(function(event){
alert(event.type); //获取时间类型
return false; //阻止链接跳转
})

以上代码运行后会返回:“click”。

2.event.preventDefault()方法
该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。

3.event.stopPropagation()方法
该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。

4.event.target属性
event.target属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。

$("a[href=http://www.jb51.net]").click(function(event){
alert(event.target.href); //获取触发事件的<a>元素的href属性值
alert(event.target.tagName); //获取触发事件的元素的标签名称
return false; //阻止链接跳转})

 5.event.relatedTarget属性
在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法来访问,相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性,在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装,使之能兼容各种浏览器。

6.event.pageX/event.pageY属性
该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时,那么IE浏览器中是用event/event.y方法,而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条,则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。

$(function() {
$("a").click(function(event) {
alert("Current mouse position:" + event.pageX + "," + event.pageY);
//获取鼠标当前相对于页面的坐标
return false; //阻止链接跳转
});
})

 7.event.which属性
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按钮。

$(function() {
$("body").mousedown(function(e) {
alert(e.which); //1 = 鼠标左键;2 = 鼠标中键;3 = 鼠标右键。
})
})

以上代码加载到页面中,用鼠标单击页面时,单击左、中、右键分别返回1、2、3.

8.event.metaKey属性
针对不同浏览器对键盘中的<ctrl>按键解释不同,jQuery也进行了封装,并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。

9.event.originalEvent属性。
该方法的作用是指向原始的事件对象。

jQuery.event详细解析的更多相关文章

  1. ;(function($,window,undefined){})(jQuery,window)详细解析————借助B5教程解析自己整理了一下

    在jquery插件中我们经常看到以下这段代码 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, window,d ...

  2. Jquery的详细解析和用法

    一.Jquery简介 Jquery是一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari  ...

  3. jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  4. jquery 源码解析 节点遍历

    jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...

  5. jQuery Ajax 全解析

    转自:http://www.cnblogs.com/qleelulu/archive/2008/04/21/1163021.html 本文地址: jQuery Ajax 全解析 本文作者:QLeelu ...

  6. jQuery Ajax 全解析(转载)

    本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Java ...

  7. jQuery源码解析资源便签

    最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...

  8. jquery源码解析:代码结构分析

    本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function() ...

  9. 【前端】原生event对象和jquery event对象的区别

    标准DOM event对象转换成 jQuery event对象 $(event) jQuery event对象转换成 标准DOM event对象 event.originalEvent

随机推荐

  1. 关于UIImageView的显示问题——居中显示或者截取图片的中间部分显示

    我们都知道在ios中,每一个UIImageView都有他的frame大小,但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢?在默认情况,图片会被压缩或者拉伸以填满整个区域. 通过查看UI ...

  2. C#编程(七十三)----------浅析C#中内存管理

    浅析C#中内存管理 前言:个人觉得C#吸收了各种语言的优点,可谓集大成者,但是不知但,这种集所有语言于一身的情况是好是坏.C#编程的一个优点就是程序员不需要关心具体的内存管理,尤其是垃圾收集器会处理所 ...

  3. android studio一直卡在Gradle:Executing tasks

    http://www.eoeandroid.com/forum.php?mod=viewthread&tid=554227 新建了个hello world项目,运行就卡在Gradle:Exec ...

  4. Netty 包头

    LengthFieldBasedFrameDecoder 常用的处理大数据分包传输问题的解决类,先对构造方法LengthFieldBasedFrameDecoder中的参数做以下解释说明 maxFra ...

  5. cocos2d-x 3.0 正式版 项目创建

    官方示比例如以下: Example: $ cd cocos2d-x $ ./setup.py $ source FILE_TO_SAVE_SYSTEM_VARIABLE $ cocos new Eng ...

  6. git 两个中心仓库上的分支 merge

    首先在一个中心仓库里面添加另外一个仓库的所有分支. 命令: git remote add Cangku2 https://github.com/abc/abc.git git fetch 这之后在使用 ...

  7. java List转换为字符串并加入分隔符的一些方法总结

    方法一: public String listToString(List list, char separator) { StringBuilder sb = new StringBuilder(); ...

  8. 平台升级至spring 4.3.0 运行稳定

    deprecated velocity 部份方法 整理中...

  9. python 多线程日志切割+日志分析

    python 多线程日志切割+日志分析 05/27. 2014 楼主最近刚刚接触python,还是个小菜鸟,没有学习python之前可以说楼主的shell已经算是可以了,但用shell很多东西实现起来 ...

  10. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...