当前位置:Gxlcms > JavaScript > JavaScript事件对象介绍_基础知识

JavaScript事件对象介绍_基础知识

时间:2021-07-01 10:21:17 帮助过:9人阅读

JavaScript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能;
最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况;
此外还可以修改一般事件的捕获/冒泡流的函数;

一 事件对象

// 通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等;

二 鼠标事件
// 鼠标事件是Web上面最常用的一类事件,毕竟鼠标还是最主要的定位设备;

1.鼠标按钮

2.可视区及屏幕坐标

3.修改键

三 键盘事件

用户在使用键盘时会触发键盘事件;
"DOM2级事件"最初规定了键盘事件,后来又删除了相应的内容;
最终还是使用最初的键盘事件,不过IE9已经率先支持"DOM3"级键盘事件;

1.键码

2.字符编码

四 W3C与IE
// 在标准的DOM事件中,event对象包含与创建它的特定事件有关的属性和方法;

// 触发的事件类型不一样,可用的属性和方法也不一样;

W3C中event对象的属性和方法
属性/方法 类型 读/写 说明
bubbles Boolean 只读 表明事件是否冒泡;
cancelable Boolean 只读 表明是否可以取消事件的默认行为;
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素;
detail Integer 只读 与事件相关的细节信息;(一般用于滚轮信息的值);
eventPhase Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示处理目标,3表示冒泡阶段;
preventDefault() Function 只读 取消事件的默认行为;如果cancelable的值是true,则可以使用这个方法;
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡;如果bubbles的值为true,则可以使用这个方法;
target Element 只读 事件的目标;
type String 只读 被触发的事件的类型;
view AbstractView 只读 与事件关联的抽象视图;等同于发生事件的window对象;

IE中的event对象的属性
属性 类型 读/写 说明
cancelBubble Boolean 读写 默认值为false,但将其设置为true就可以取消事件冒泡;
returnValue Boolean 读写 默认值为true,但将其值设置为false就可以取消事件的默认行为;
srcElement Element 只读 事件的目标;
type String 只读 被触发的事件类型;

五 事件流

事件流是描述的从页面接收事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么点击其中一个元素;
并不是只有当前被点击的元素会触发事件,而是层叠在点击范围的所有元素都会触发事件;
事件流包含两种模式:冒泡和捕获;

1.事件冒泡
是从里往外逐个触发;

2.事件捕获
是从外往里逐个触发;

人气教程排行