jQuery.event详细解析
介绍之前先介绍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详细解析的更多相关文章
- ;(function($,window,undefined){})(jQuery,window)详细解析————借助B5教程解析自己整理了一下
在jquery插件中我们经常看到以下这段代码 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, window,d ...
- Jquery的详细解析和用法
一.Jquery简介 Jquery是一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari ...
- jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js
jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...
- jquery 源码解析 节点遍历
jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...
- jQuery Ajax 全解析
转自:http://www.cnblogs.com/qleelulu/archive/2008/04/21/1163021.html 本文地址: jQuery Ajax 全解析 本文作者:QLeelu ...
- jQuery Ajax 全解析(转载)
本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Java ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
- 【前端】原生event对象和jquery event对象的区别
标准DOM event对象转换成 jQuery event对象 $(event) jQuery event对象转换成 标准DOM event对象 event.originalEvent
随机推荐
- EEPLAT学习
eeplat:Open Source Metadata PaaS 開始学习的时候仅仅是下了整个项目而且跑通,顺手在这个平台自己主动化的建立 了个管理系统,接下来開始深入研究这个开源平台 所谓元数据(m ...
- 阅读Linux内核源码时建立tags索引
比如在阅读arm架构的Linux内核代码时想建立arm架构相关的索引,可以使用下面的命令: make ARCH=arm tags
- C#复制数组的两种方式,以及效率比较
如何高效地进行数组复制? 如果把一个变量值复制给另外一个数组变量,那么2个变量指向托管堆上同一个引用. 如果想在托管堆上创建另外的一份数组实例,通常使用Array.Copy方法. class Prog ...
- firedac调用ORACLE的存储过程
firedac调用ORACLE的存储过程 EMB官方原文地址:http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Using_Oracle_with_F ...
- WordPress主题开发:get_term_by和get_term_link
学习目的: 某一个分类的名称.别名.和id都可以到后台自己去找,但这样找比较麻烦还容易看错,wordpress提供了下面两个函数get_term_by和get_term_link,只要提供别名.名称或 ...
- Monitoring an IBM JVM with VisualVM
Monitoring an IBM JVM with VisualVM 分类: Java 2013-06-09 16:15 250人阅读 评论(0) 收藏 举报 JDK6 update 7 and o ...
- 发展受阻第一至四季/全集Arrested迅雷下载
发展受阻 第一至四季 Arrested Development 1-4 (2013)本季看点:<发展受阻>讲述了一个很有钱的Bluth家庭的故事,主要聚焦家族里的各种古怪事和相互算计带来的 ...
- 帕累托分布(Pareto distributions)、马太效应
什么是帕累托分布 帕累托分布是以意大利经济学家维弗雷多·帕雷托命名的. 是从大量真实世界的现象中发现的幂次定律分布.这个分布在经济学以外,也被称为布拉德福分布. 帕累托因对意大利20%的人口拥有80% ...
- Redis 性能问题的记录
最近线上使用redis, 查询的情况不甚理想, 这个查询操作是个 lua 脚本, 包含如下操作 开发机 redis, 没有其他干扰, 插入的 zset 有 5000 member 左右, 使用的 re ...
- go语言之进阶篇 channel介绍
1.channel介绍 和map类似,channel也一个对应make创建的底层数据结构的引用. 当我们复制一个channel或用于函数参数传递时,我们只是拷贝了一个channel引用,因此调用者何被 ...