Jquery中Event对象属性小结


Posted in Javascript onFebruary 27, 2015

 JS的Event对象是触发事件的时候传递给事件处理函数的一个对象,这个对象中存在触发事件的基本信息。如:触发事件的事件源、键盘码(如果存在)等基本信息。

1、通过event.type获取事件的类型

<script>

$(function(){

    $("a").click(function(event) {

      alert(event.type);//获取事件类型

      //return false;//阻止链接跳转

      event.preventDefault();

    });

})

</script>

2、获取事件目标的属性值
html部分代码如下:

<body>

<a href='http://google.com'>click me .</a>

</body>
<script>

$(function(){

    $("a[href=http://google.com]").click(function(event) {

      alert(event.target.href);//获取触发事件的<a>元素的href属性值

      return false;//阻止链接跳转

    });

})

</script>

可以获取到属性href的值为‘http://google.com'。

3、获取鼠标对应的坐标值x与y

<script>

$(function(){

    $("a").click(function(e) {

      alert("Current mouse position: " + e.pageX + ", " + e.pageY );//获取鼠标当前相对于页面的坐标

      return false;//阻止链接跳转

    });

})

</script>

这里传递的参数名不一定非要是event,可以是任意的名称,只要后面的相对应就可以。默认传入的值为event。如果你不给参数的话,就会默认传入一个叫event的参数。

4、which属性可以获取相应的事件对应的值
which 属性指示按了哪个键或按钮。

<script>

$(function(){

    $("a").mousedown(function(e){

        alert(e.which)  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键

        return false;//阻止链接跳转

    })

})

</script>

关于如何得到一个键在Javascript中的Keycode值,可以参考:

keycode 8 = BackSpace BackSpace 

keycode 9 = Tab Tab 

keycode 12 = Clear 

keycode 13 = Enter  

keycode 16 = Shift_L 

keycode 17 = Control_L 

keycode 18 = Alt_L 

keycode 19 = Pause 

keycode 20 = Caps_Lock 

keycode 27 = Escape Escape 

keycode 32 = space space 

keycode 33 = Prior 

keycode 34 = Next 

keycode 35 = End 

keycode 36 = Home 

keycode 37 = Left 

keycode 38 = Up 

keycode 39 = Right 

keycode 40 = Down 

keycode 41 = Select 

keycode 42 = Print 

keycode 43 = Execute 

keycode 45 = Insert 

keycode 46 = Delete 

keycode 47 = Help 

keycode 48 = 0 equal braceright 

keycode 49 = 1 exclam onesuperior 

keycode 50 = 2 quotedbl twosuperior 

keycode 51 = 3 section threesuperior 

keycode 52 = 4 dollar 

keycode 53 = 5 percent 

keycode 54 = 6 ampersand 

keycode 55 = 7 slash braceleft 

keycode 56 = 8 parenleft bracketleft 

keycode 57 = 9 parenright bracketright 

keycode 65 = a A 

keycode 66 = b B 

keycode 67 = c C 

keycode 68 = d D 

keycode 69 = e E EuroSign 

keycode 70 = f F 

keycode 71 = g G 

keycode 72 = h H 

keycode 73 = i I 

keycode 74 = j J 

keycode 75 = k K 

keycode 76 = l L 

keycode 77 = m M mu 

keycode 78 = n N 

keycode 79 = o O 

keycode 80 = p P 

keycode 81 = q Q at 

keycode 82 = r R 

keycode 83 = s S 

keycode 84 = t T 

keycode 85 = u U 

keycode 86 = v V 

keycode 87 = w W 

keycode 88 = x X 

keycode 89 = y Y 

keycode 90 = z Z 

keycode 96 = KP_0 KP_0 

keycode 97 = KP_1 KP_1 

keycode 98 = KP_2 KP_2 

keycode 99 = KP_3 KP_3 

keycode 100 = KP_4 KP_4 

keycode 101 = KP_5 KP_5 

keycode 102 = KP_6 KP_6 

keycode 103 = KP_7 KP_7 

keycode 104 = KP_8 KP_8 

keycode 105 = KP_9 KP_9 

keycode 106 = KP_Multiply KP_Multiply 

keycode 107 = KP_Add KP_Add 

keycode 108 = KP_Separator KP_Separator 

keycode 109 = KP_Subtract KP_Subtract 

keycode 110 = KP_Decimal KP_Decimal 

keycode 111 = KP_Divide KP_Divide 

keycode 112 = F1 

keycode 113 = F2 

keycode 114 = F3 

keycode 115 = F4 

keycode 116 = F5 

keycode 117 = F6 

keycode 118 = F7 

keycode 119 = F8 

keycode 120 = F9 

keycode 121 = F10 

keycode 122 = F11 

keycode 123 = F12 

keycode 124 = F13 

keycode 125 = F14 

keycode 126 = F15 

keycode 127 = F16 

keycode 128 = F17 

keycode 129 = F18 

keycode 130 = F19 

keycode 131 = F20 

keycode 132 = F21 

keycode 133 = F22 

keycode 134 = F23 

keycode 135 = F24 

keycode 136 = Num_Lock 

keycode 137 = Scroll_Lock 

keycode 187 = acute grave 

keycode 188 = comma semicolon 

keycode 189 = minus underscore 

keycode 190 = period colon 

keycode 192 = numbersign apostrophe 

keycode 210 = plusminus hyphen macron 

keycode 212 = copyright registered 

keycode 213 = guillemotleft guillemotright 

keycode 214 = masculine ordfeminine 

keycode 215 = ae AE 

keycode 216 = cent yen 

keycode 217 = questiondown exclamdown 

keycode 218 = onequarter onehalf threequarters 

keycode 220 = less greater bar 

keycode 221 = plus asterisk asciitilde 

keycode 227 = multiply division 

keycode 228 = acircumflex Acircumflex 

keycode 229 = ecircumflex Ecircumflex 

keycode 230 = icircumflex Icircumflex 

keycode 231 = ocircumflex Ocircumflex 

keycode 232 = ucircumflex Ucircumflex 

keycode 233 = ntilde Ntilde 

keycode 234 = yacute Yacute 

keycode 235 = oslash Ooblique 

keycode 236 = aring Aring 

keycode 237 = ccedilla Ccedilla 

keycode 238 = thorn THORN 

keycode 239 = eth ETH 

keycode 240 = diaeresis cedilla currency 

keycode 241 = agrave Agrave atilde Atilde 

keycode 242 = egrave Egrave 

keycode 243 = igrave Igrave 

keycode 244 = ograve Ograve otilde Otilde 

keycode 245 = ugrave Ugrave 

keycode 246 = adiaeresis Adiaeresis 

keycode 247 = ediaeresis Ediaeresis 

keycode 248 = idiaeresis Idiaeresis 

keycode 249 = odiaeresis Odiaeresis 

keycode 250 = udiaeresis Udiaeresis 

keycode 251 = ssharp question backslash 

keycode 252 = asciicircum degree 

keycode 253 = 3 sterling 

keycode 254 = Mode_switch

以上是js中的键值参考,其中比较重要的有13(enter),32(空格),27(ESC),16(Shift),17(Ctrl),18(Alt)。

更多的值可以通过下面的jQuery来获取:

<script>

$(function(){

    $("input").keyup(function(e){//获取keyup时间的值

        alert(e.which);

    })

})

</script>
Javascript 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery侧边栏实现代码
May 06 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
详解vue-property-decorator使用手册
Jul 29 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 #Javascript
JS实现往下不断流动网页背景的方法
Feb 27 #Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
asp.net+js实现金额格式化
Feb 27 #Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 #Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 #Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 #Javascript
You might like
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JS实现秒杀倒计时特效
2020/01/02 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python修改操作系统时间的方法
2015/05/18 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
如何查看python关键字
2021/01/17 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
详解JAVA的控制语句
2021/11/11 Java/Android