jQuery 事件对象的属性
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 事件对象的属性的更多相关文章
- jQuery事件对象的属性
注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...
- JQuery事件对象的属性和方法
这是今天的总结,以后学习自己可以当参考书来读读.Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会在事件发生前被执行 ...
- jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- 知识笔记:jQuery 事件对象属性小结
使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...
- jquery 事件对象属性小结
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- JQuery修改对象的属性值
JQuery修改对象的属性值 用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr(& ...
- jquery 事件对象笔记
jQuery元素操作 设置或获取元素固有属性 获取 prop(属性名) 修改 prop(属性名,值) 获取自定义属性 ...
随机推荐
- Hacking /dev/random: Pipe
1) 下载镜像,虚拟机启动 https://download.vulnhub.com/devrandom/pipe.ova 2) nmap 扫描探测 Nmap 扫描开路: ╰─ nmap -Pn -s ...
- 2019元月新SAP项目落地记
2019元月新SAP项目落地记 ~ 追求绝对安全感,要求无缝衔接 ~ 元旦刚过,我就开始了新SAP项目的寻找之旅. 笔者追求绝对的安全感,以及新旧项目之间的无缝衔接.即不能让自己长时间的闲着无项目做, ...
- 请不要在广州.NET俱乐部群里谈郑智话题,谢谢!
收到私聊说代码无国界,但是程序员是有国界的,程序员也有关心国家大事的权力! 我是极度赞同“代码无国界,但是程序员是有国界的,”我也极度赞同程序员也要爱国. 因为我们新兴县六祖镇叶氏家族就有四位爱国 ...
- iOS----------拨打电话的3种方式
iOS实现拨打电话的方式: 方法一.requestWithURL,此方法拨打前弹出提示 NSMutableString * string = [[NSMutableString alloc] in ...
- js 数组去重小技巧
js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...
- jQuery根据radio来控制texteara
最近遇到一个问题:需要通过点击radio来控制texteara的属性变化. 这里主要有两个知识点:1,给texteara设置属性:2,给texteara设置背景颜色. 在这里,假设texteara的i ...
- A Deep Learning-Based System for Vulnerability Detection
本篇文献作者提出了一种基于深度学习来检测软件漏洞的方案. 摘要:作者开始基于深度学习的漏洞检测研究,是为了减轻专家手工定义特性的繁琐任务,需要制定一些指导性原则来适用于深度学习去进行漏洞探 ...
- some settings for spacemacs golang
spacemacs 中的 golang配置 spacemacs 中的 golang layer 已经有很多默认的配置了, 但是都是针对在 GOPATH 下的配置. 如果你的项目不再默认 的 GOPAT ...
- 4.机器学习——统计学习三要素与最大似然估计、最大后验概率估计及L1、L2正则化
1.前言 之前我一直对于“最大似然估计”犯迷糊,今天在看了陶轻松.忆臻.nebulaf91等人的博客以及李航老师的<统计学习方法>后,豁然开朗,于是在此记下一些心得体会. “最大似然估计” ...
- 【任务】Python语言程序设计.MOOC学习
[博客导航] [Python导航] 任务 18年11月29日开始,通过9周时间跨度,投入约50小时时间,在19年1月25日之前,完成中国大学MOOC平台上的<Python语言程序设计>课程 ...