JS中的event 对象详解

javascript学习——Event 对象详解 事件发生以后,会产生一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了对象。Event对象本身就是一个构造函数,可以用来生成新的实例。构造函数接受两个参数。第一个参数type是字符串,表示事件的名称;第二个参数options是一个对象,表示事件对象的配置。该对象主要有下面两个属性。bubblesfalsecancelablefalse上面代码新建一个look事件实例,然后使用方法触发该事件。注意,如果不是显式指定bubbles属性为true。 阅读详情
Event属性和方法:

1. type:事件的类型,如onlick中的click;

2. srcElement/target:事件源,就是发生事件的元素;

3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,就把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)

4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置;

6. x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数;

7. altKey,ctrlKey,shiftKey等:返回一个布尔值;

8. keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 )

9. fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;

10. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();)

11. returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定 DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在
attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;

13. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;


一些说明:

1.  event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;

2.  event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。
在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是 window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。

3.  下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null

4.  IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如, div 标签包含了 a ,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行标签 a 的onclick事件处理函数,再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后,不希望执行上层的 div 的onclick的事件处理函数了,那么就把cancelBubble设置为true即可。

js event.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 211 = 
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

键值对应表
A  0X65  U   0X85
B  0X66  V   0X86
C  0X67  W   0X87
D  0X68  X   0X88
E  0X69  Y   0X89
F  0X70  Z   0X90
G  0X71  0   0X48
H  0X72  1   0X49
I  0X73  2   0X50
J  0X74  3   0X51
K  0X75  4   0X52
L  0X76  5   0X53
M  0X77  6   0X54
N  0X78  7   0X55
O  0X79  8   0X56
P  0X80  9   0X57
Q  0X81 ESC  0X1B
R  0X82 CTRL  0X11
S  0X83 SHIFT 0X10
T  0X84 ENTER 0XD

如果要使用组合键,则可以利用event.ctrlKey,event.shiftKey,event .altKey判断是否按下了ctrl键、shift键以及alt键.

汽车ECU诊断刷写和OTA升级中的验签和校验 阅读详情

相关推荐

U-net复现pytorch版本 以及制作自己的数据集并训练

GitHub链接: https://github.com/milesial/Pytorch-UNet 论文链接:

candice5566的博客 3万+

on-event事件处理器与addEventListener区别

1. on-event 我们通常将通过on-event函数绑定的叫事件处理器(handler event) on-event 属于 DOM level 0 events,最早提出的规范 这种事件处理方式,是将指定的事件注册到元素上实现的,作为一个元素属性 var t = document.getElementById('demo') t.onclick = function() { } 因为是作...

zmjのblog 4476

超详细版risc-v五级流水线cpu硬件设计实现解析

深入剖析risc-v五级流水线cpu的硬件架构与设计细节,涵盖指令流程、模块划分与关键时序控制,帮助理解risc-v五级流水线cpu的工作机制与优化策略。

weixin_42437253的博客 1631

JavaScript中的Event对象用法

在JS中对于Event对象,大家都不陌生,其本身属性和方法在做页面特效或者特殊处理中能够大大地派出用场,现整理一下EVENT对象相关属性和方法使用。Event属性和方法:<br /><br />1. type:事件的类型,如onlick中的click;<br /><br />2. srcElement/target:事件源,就是发生事件的元素;<br /><br />3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下

robyjeffding的专栏 1462

PX4飞控与MAVROS实战:从零搭建无人机ROS通信环境(附常见报错解决)

本文详细介绍了如何从零搭建PX4飞控与ROS的通信环境,重点解析了MAVROS的安装、硬件连接、串口权限配置以及坐标系转换等核心步骤。针对GeographicLib数据下载失败、串口权限不足等常见报错提供了实用解决方案,并附有Offboard模式控制的代码示例,帮助开发者快速建立稳定的无人机ROS开发环境。

dapp9builder的博客 335

UE5热更新(通过Pak包加载关卡资源,并添加到流关卡)

请先阅读我上一篇文章)**

xialuhui的博客 6456

关于EventBus的onEvent()、onEventMainThread()、onEventBackgroundThread()、onEventAsync()的解释

几句话概括: 1.onEvent() 使用onEvent来接收事件,那么接收事件和post事件在同一个线程中执行 2.onEventMainThread() 使用onEventMainThread来接收事件,那么不论post事件在哪个线程运行,接收事件永远在UI线程执行 3.onEventBackgroundThread() 使用onEventBackground...

AndroidGuy的专栏 7277

量化回测系统实战指南:从VectorBT到自研框架的深度解析

本文深入解析量化回测系统实战,从VectorBT和Backtesting.py的对比到自研框架miniQuant的设计与优化。探讨如何平衡速度与灵活性,解决实盘适配性问题,并提供性能调优技巧和可视化分析工具,帮助开发者构建高效可靠的量化交易系统。

weixin_28308325的博客 276

EventBus使用详解(二)——EventBus使用进阶

前言:这段时间感觉自己也有点懒了,真是内心有点自责呢,除了工作,也没做点什么,EventBus也是一周前总结出来的,只能以写博客为名来弥补内心的罪恶感了,集合同事们做的项目,虽然上周开动了,但总感觉大家积极性不高,如何才能做一个合格的管理者,还真是一个考验。follow your heart!! just do it! 相关文章: 1、《EventBus使用详解(一)——初步使用E...

启舰 13万+

人大金仓V8R3企业版License更新全攻略:从查看到重启一步到位

本文详细解析了人大金仓V8R3企业版License更新的完整运维流程,涵盖从诊断当前授权状态、获取与验证新文件、精准定位旧文件路径,到安全替换文件及服务重启验证的全过程。重点针对更新流程中常见的版本匹配、文件定位、权限与服务重启等关键环节提供了实战解决方案和避坑指南,帮助运维人员高效、平稳地完成授权续期。

redis7keeper的博客 896

zemax---光学设计基础概念篇(持续更新中)

光学设计相关知识概念

u011699626的博客 1145

JS 之 事件Event对象详解(属性、方法、自定义事件)

​ 事件event对象是指在浏览器中触发事件时,浏览器会自动创建一个event对象,其中存储了本次事件相关的信息,包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后,会自动将该对象作为参数传递给绑定的事件处理函数,我们可以在事件处理函数中通过访问event对象的属性和方法,来获取事件的相关信息,并做出后续的逻辑处理。

weixin_45092437的博客 1万+

弹窗提示报错: F:\c\CFX5\bin\Debug\net9.0-windows10.0.26100.0\CFX5.dll 面向无法动态枚举工具箱项目的平台...如何解决?

🏆本文收录于 《全栈Bug调优(实战版)》 专栏,该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因,并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者,还是拥有多年项目经验的资深工程师,本专栏都将为你提供一条系统化、高质量的问题排查与优化路径,助力你加速成长,攻克技术壁垒,迈向技术价值最大化与职业发展的更高峰🚀!

**My Coding Family** 945

js event对象调用java_Javascript的Event对象详解

javascript Event方法和属性讲解Event属性和方法:type:事件的类型,如onlick中的click;srcElement/target:事件源,就是发生事件的元素;button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)clientX/cl...

weixin_33421411的博客 196

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

JS Event对象详解

1:相同事件绑定和解除,需要使用共用函数;绑定和解除事件时,事件没有"on",即onclick写成click2:共用函数不能带参数;

好女绪的博客 7323

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

JavaScript核心之事件详解(EventTarget接口,js事件传播,Event对象)

目录 1 EventTarget接口 1.1 addEventListener() 1.1.1 addEventListenerthis对象的指向 1.2 removeEventListener() 1.3 dispatchEvent() 2 监听函数 2.1 HTML标签的on-属性 2.2 Element节点的事件属性 2.3addEventListener方法 3 事件...

上善若泪 5099

js-event(事件对象)详解

1、事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 什么时候会产生Event 对象呢? 例如:当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象。 事件通常与函数结合使用,函数不会在事件发生前被执行! 使用场景即: var oDIv = document.getElementById('box'); oDiv.onclick = function(...

顺其自然~专栏 1万+

JavaScript中的Event事件对象详解

本文深入剖析JavaScript事件对象的本质与核心功能,详细讲解event对象的常用属性和方法,包括target、currentTarget、preventDefault()和stopPropagation()等关键API。系统解析事件流的捕获与冒泡机制,对比三种事件绑定方式的优缺点,重点介绍事件委托的性能优化策略。通过丰富的代码示例演示如何高效处理DOM事件,解决实际开发中的事件管理难题,提升Web应用的交互性能和代码可维护性。

m0_73941339的博客 1840

javascript中event对象详解

javascript中event对象详解

天亮国度 324

Javascript的Event对象详解()

Javascript的Event对象用来描述Javascript的事件,它主要作用于IE4和NN4以后的各个浏览器版本中。Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象。 IE对事件的引用 在IE4以上版本中,event对象作为window属性访问:window.event...

liyanhui 166
上一篇: Ajax技术利弊分析
下一篇: JavaScript学习笔记(三)
轻鸿飘羽
博客等级 码龄16年 124粉丝 74原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值