Event 对象的属性和方法
事件触发时,会将一个 Event 对象传递给事件处理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
事件类型
DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent,不同的事件有不同的属性和方法,但常用的来说我们都不会用错,比如我们不会在鼠标事件中去取键盘值(Ctrl、Alt、Shift 除外),所以我们没有必要深究。
该对象的属性和方法有:
view 只读,对象,发生事件的 Window 对象。
type 只读,字符串。比如鼠标点击事件的类型:click。
eventPhase 只读,数字,事件流正经历的阶段。1-捕获,2-目标,3-冒泡。
target 只读,对象,派发事件的目标对象。比如鼠标是点击在哪个按钮上的。
currentTarget 只读,对象,当前正在调用监听器的对象,也就是当前 addEventListener 是绑定在哪个对象上的。
timeStamp 只读,数字,用毫秒表示事件发生时距计算机开机的时间。
cancelable 只读,布尔,处理事件的默认行为是否可以停止。主要针对一些系统事件,如果值为 true,则 event 的 preventDefault 方法可以使用,否则不可用。
preventDefault() 阻止浏览器的默认行为,比如在文本框中打字触发 keydown,如果 keydown 事件处理程序中调用了 preventDefault(),所打的字就不会跑到文本框中去,注意,此时不要弹出 alert 对话框,否则可能不起作用。IE 中在事件处理程序中用 return false 实现类似功能。
bubbles 只读,布尔,事件是否开启冒泡功能。
stopImmediatePropagation()停止当前的事件流传播,并让当前对象(不仅parent了)的次优先级的所有监听都不执行。
stopPropagation() 停止当前的事件流传播,但不会停止当前正在处理的对象的其他监听事件的执行。IE 中用 event.cancelBubble = true 实现类似功能。
cancelBubble 布尔,是否取消冒泡,不建议使用,用 stopPropagation() 代替。
preventBubble() 阻止冒泡,不建议使用,用 stopPropagation() 代替。
preventCapture() 阻止捕获,不建议使用,用 stopPropagation() 代替。
detail 只读,数字,提供时间的额外信息,对于 click 事件、mousedown 事件和 mouseup 事件,这个字段代表点击的次数。
isChar 只读,布尔,按下的按键值是否是字符,比如按下 Ctrl 键时,就返回 false。不过您在 Firefox 中测试时,该值总是 false,Firefox 官方已经说明这是一个 bug。
altKey 只读,布尔,是否按下了 Alt 键。
ctrlKey 只读,布尔,是否按下了 Ctrl 键。
shiftKey 只读,布尔,是否按下了 Shift 键。
metaKey 只读,布尔,是否按下了 Meta 键。
下面一些属性很有意思,请仔细区别
charCode 只读,数字,字符(英文、数字、符号)的 Unicode 值。
- 只用于 keypress。
keyCode 只读,数字,键盘按键值。
- 用于 keypress 时:返回非字符按键值(除 Ctrl、Shift、Alt、Caps Lock、单行文本框中按向上键等);
- 用于 keydown、keyup 时:返回任意键值。
button 只读,数字,鼠标按键值。
- 用于 click 时:0-左键。
- 用于 mousedown、mouseup 时:0-左键,1-中间键(滚轮),2-右键。
which 只读,数字,键盘按键值或鼠标按键值。
- 用于 keypress 时:等同于 charCode + 回退键 + 回车键;
- 用于 keydown、keyup 时:返回任意键值;
- 用于 click 时:1-左键,与 button 的值略有区别。
- 用于 mousedown、mouseup 时:1-左键,2-中间键(滚轮),3-右键,与 button 的值略有区别。
可以看出,which 只有一点没有包括:那就是 keypress 时,不如 keyCode 那么全,但实际上,keypress 事件中用于非字符键的情况较少,所以一般还是用 which 代替全部。
注意:
事件分发时(时间执行过程中)添加的监听不会立即触发,可能会在下一个事件流(比如冒泡阶段)中触发。
如果添加多个相同的 eventListener,如下,三个参数完全相同,并且第二个参数不是匿名函数。
document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);
会抛弃多余的,只保留一个,对应的 removeEventListener 也只用一次就可以了(removeEventListener 用法和 addEventListener 完全相同)。
但如果是第二个参数是匿名函数,比如:
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
则三个均有效,并且无法用 removeEventListener 除去。
关于this
事件处理程序中,this 变成了触发事件的控件,但我们仍推荐用 event.target 或 event.currentTarget。
早期浏览器中事件监听是怎么绑定的
在 DOM0 中,我们用 obj.onclick = FuncName,由于兼容性好,应用非常广泛,只是功能不如 addEventListener 强大。
内存问题
前面提到了许多使用匿名函数的地方,有时这是没办法的,但这会导致内存问题。
一旦事件绑定之后,该绑定代码作用域的变量就都保留下来,不会被 JavaScript 引擎回收,这可能会引起占用大量内存的问题,由于 removeEventListener 无法删除匿名函数的事件处理程序,只有在物件(比如按钮)去除之后,该内存才可能得到回收。
Event 对象的属性和方法的更多相关文章
- DOM的event对象的属性和方法
属性/方法 类型 是否可读写 描写叙述 altKey Boolean 读写 指示是否按下alt键 bubbles Boolean 读 指示事件是否冒泡 button Intrger 读写 鼠标事件发生 ...
- Javascript常用对象的属性和方法
javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- JS中的RegExp对象常用属性和方法
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数 ...
- location对象的属性和方法应用(解析URL)
本文将与大家分享下location对象使用属性和方法来解析URL的实例,感兴趣的朋友可以参考下,希望对你有所帮助 location对象提供了很多属性和方法用来解析URL. 复制代码代码如下: &l ...
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法
1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...
- javascript面向对象(给对象添加属性和方法的方式)
1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法 var g ...
- 理解Python中的类对象、实例对象、属性、方法
class Animal(object): # 类对象 age = 0 # 公有类属性 __like = None # 私有类属性 def __init__(self): # 魔法方法 self.na ...
- HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...
随机推荐
- Hadoop 管理工具HUE配置-filebrowser配置
Hue提供了图形化截面管理HDFS数据,可谓之非常方便,但是在配置上,还是有点麻烦的. 1 /home/hadoop/software/cloud/hue/desktop/conf/pseudo-di ...
- Paramiko&堡垒机
Paramiko paramiko模块,基于SSH用于连接远程服务器并执行相关操作. 一.安装 pip install paramiko 二.使用 SSHClient 用于连接远程服务器并执行基本命令 ...
- Mongodb安装超长等待
最近安装了一下mongodb最新版3.6下载各个版本安装都是停在installing MongoDB Compass位置,网上看到说可以等段时间之类的发现等了1个晚上居然还没成功,取消安装也不行. 于 ...
- JavaScript之图片操作5
本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...
- random 产生一个随机数的方法
import random print( random.randint(1,10) ) # 产生 1 到 10 的一个整数型随机数 print( random.random() ) # 产生 0 到 ...
- SecureCRT & SecureFx 绿色破解版
租了腾讯云的服务器,是 ubuntu 版的,需要用到 SecureCRT 工具来远程链接,但是连接的只是控制台,只能输入命令操作,如果要下载文件什么的,就很麻烦,这时可以使用 SecureFx 来传输 ...
- 2012 - AD 验证域控是否成功部署
1,验证AD DS域服务:AD DS & AD WS 2,验证“默认容器”及“Domain Controller” 3,验证“Default-First-Site-Name" 4,验 ...
- Postgresql 珍藏级文章
https://wiki.postgresql.org/wiki/Tuning_Your_PostgreSQL_Server 如何设置参数值 https://www.cnblogs.com/zhao ...
- mobilehack -转
# mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇 ...
- Meet in the middle学习笔记
Meet in the middle(MITM) Tags:搜索 作业部落 评论地址 PPT中会讲的很详细 当搜索的各项互不影响(如共\(n\)个物品前\(n/2\)个物品选不选和后\(n/2\)个物 ...