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

(1) event.type

该方法的作用是可以获取到事件的类型。

<script>
$(function(){
$("a").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
})
</script> <body>
<a href='http://google.com'>click me .</a>
</body>

以上代码运行后会输出:"click”

(2) event.preventDefault() 方法

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

(3 ) event.stopPropagation()方法

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

(4) event.target

event.target 的作用是获取到触发事件的元素。 jQuery 对其封装后,避免了各个浏览器不同标准的差异。

<script>
$(function(){
$("a[href='http://google.com']").click(function(event) {
var tg = event.target; //获取事件对象
alert(tg.href) ;
return false;//阻止链接跳转
});
})
</script> <body>
<a href='http://google.com'>click me .</a>
</body>

以上代码运行后会输出:"http://google.com"

(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.x / event.y,而在 Firefox 浏览器中是用 event.pageX / event.pageY 。如果页面上有滚动条,则还要加上滚动条的宽度或高度。

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

(7) event.which

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按键。比如,获取鼠标的左、中、右键:

$(function(){
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
})
})

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

比如,获取键盘的按键:

$(function(){
$("input").keyup(function(e){
alert(e.which);
})
})

(8) event.metaKey

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

<script>
$(function(){
$("input").keyup(function(e){
alert( e.metaKey +" "+e.ctrlKey );
$(this).blur();
})
})
</script> <body>
<input type="text" value="按住ctrl键,然后再点其他任何键" style="width:200px"/>
</body>

注意 : 更多的 event 的属性和方法可以访问:http://api.jquery.com/category/events/event-object/

jQuery 事件对象的属性的更多相关文章

  1. jQuery事件对象的属性

    注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...

  2. JQuery事件对象的属性和方法

    这是今天的总结,以后学习自己可以当参考书来读读.Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会在事件发生前被执行 ...

  3. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

  4. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  5. 知识笔记:jQuery 事件对象属性小结

    使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...

  6. jquery 事件对象属性小结

    使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...

  7. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  8. JQuery修改对象的属性值

    JQuery修改对象的属性值 用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr(& ...

  9. jquery 事件对象笔记

    jQuery元素操作 设置或获取元素固有属性   获取               prop(属性名)    修改               prop(属性名,值) 获取自定义属性          ...

随机推荐

  1. Docker安装nginx

    直切正题: 一.安装nginx docker pull nginx 二.启动nginx容器 docker run --name mynginx -d -p : nginx 命令说明: -p 80:80 ...

  2. python学习笔记(八)、特殊方法、特性和迭代器

    1 新式类和旧式类 python类的工作方式在不断变化.较新的Python2版本有两种类,其中旧式类正快速退出舞台.新式类时Python2.2 引入的,提供了一些额外功能,如支持函数super 和 p ...

  3. Java开发笔记(三十七)利用正则串分割字符串

    前面介绍了处理字符串的常用方法,还有一种分割字符串的场景也很常见,也就是按照某个规则将字符串切割为若干子串.分割规则通常是指定某个分隔符,根据字符串内部的分隔符将字符串进行分割,例如逗号.空格等等都可 ...

  4. 事件绑定on与hover事件

    今天项目中UI设计了一个鼠标划入和划出的效果,本来这个小效果是非常简单的!可是在实际的生产环境中就出现了一点点问题!因为在实际的环境中,数据全部是用ajax异步加载进去的,这样就造成了hover方法不 ...

  5. 自定义工作流活动运行产生System.Security.SecurityException

    摘要: 微软动态CRM专家罗勇 ,回复305或者20190224可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 最近碰到一个 ...

  6. 南京邮电大学 JavaA期末复习要点总结

    南京邮电大学 JavaA复习要点: Chap1 入门 1.  Java应用程序开发过程教材P14~P15 Chap 2 基本语法 1.      标识符的命名规则教材P19 字母下划线美元符号开头,除 ...

  7. Spark之Pipeline处理模式

    一.简介 Pipeline管道计算模式:只是一种计算思想,在数据处理的整个流程中,就想水从管道流过一下,是顺序执行的. 二.特点 1.数据一直在管道中,只有在对RDD进行持久化[cache,persi ...

  8. windows下安装mysql数据库修改端口号

    Window版本 卸载原本的mysql sc delete MySQL //删除mysql 1.下载 1 2 3 MySQL   https://dev.mysql.com/downloads/ins ...

  9. js字符串String提取方法比较

    JavaScript: Slice, Substring, or Substr的选择! 在JavaScript中,字符串主要通过以下String方法之一提取: // slice // syntax: ...

  10. C#基础知识之Dictionary

    最近使用了Dictionary,出现了意想不到的错误,先记录一下自己遇到的问题以及目前我的解决方法,然后温习一下Dictionary的基础用法. 一.自己遇到的问题 1.代码如下: namespace ...