EVENT事件对象

最新推荐文章于 2024-07-04 17:50:48 发布

Abubliss

最新推荐文章于 2024-07-04 17:50:48 发布

阅读量296

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Abubliss/article/details/104828220

版权

EVENT详解

1. 事件流

1.1 什么是事件

事件是文档或浏览器窗口中发生的，特定的交互瞬间，是由用户或浏览器自身执行的某种动作

1.2 什么是事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。
DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

1.3 两种事件流模型

1.3.1 冒泡事件流

冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到根节点。
在冒泡型事件流中事件传播的顺序为<div>---> <body>---> <html>--->document
自下往上的执行事件处理函数

1.3.2 捕获事件流

捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点
在捕获型事件流中事件传播的顺序为document---> <html>---> <body>---> <div>
自上往下的执行事件处理函数

1.4 事件绑定的方式

1.对象.事件类型=function(){代码块}
2.<标签事件类型=“事件处理函数fn()”></>
3.window.事件类型=事件处理函数（此处函数不能带括号）
//以上方式均只能给一个元素注册一个同类型事件事件
//采用方法2，直接在标签中写多个同类型事件，只会执行第一个
//采用方法1，3，通过对象绑定同类型事件时，只会执行最后一个
4. 事件监听：同类型事件均可执行

1.4.1 事件监听

addEventListenner:非IE7，8使用
绑定对象.addEventListener(‘事件类型’，事件处理函数，冒泡还是捕获)
//事件类型不要加“on”;事件处理函数不加括号;true为捕获，false为冒泡，默认为冒泡
//此方法使同类型事件均可执行且按注册顺序执行

attachEvent：IE7，8使用
元素.attachEvent(‘事件类型’，事件处理函数)
//事件类型要加“on”
//此方法使同类型事件均可执行且按注册顺序倒序执行

事件监听兼容性写法

if(对象.addEventListener){
   对象.addEventListener('事件类型','处理函数',冒泡/捕获)
}else{
   对象.attachEvent('事件类型','处理函数')
}

2. 事件对象

2.1 什么是事件对象

在触发DOM上的事件时都会产生的一个对象。

2.2 对事件对象的认识

事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象
所有浏览器都支持event对象，但支持方式不同，在DOM中event对象必须作为唯一的参数传给事件处理函数，在IE中event是window对象的一个属性。
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等
通过事件对象可以阻止默认事件、阻止冒泡、获取鼠标位置、获取事件源、获取DOM节点，传递数据，确定按键…

2.2.1 获取事件的光标位置

属性	描述
offsetX,offsetY	相对于所点击的元素而言，从所点击的元素内侧边框开始计算
clientX,clientY	相对于当前可视窗口所点击的光标位置
PageX,PagetY	相对于页面所点击的光标点，无论页面是否滚动

2.2.2 确定按键

通过keyCode来获取相关键盘按键信息

document.keyup=function(e){
   e=e||window.event
   var keyCode=e.keyCode||e.which//火狐2.0不支持keyCode需使用which，故采用此兼容写法
   if(keyCode===65)
   console.log('按下了a')
}

2.2.3 event对象的一些兼容写法

//获得event对象
e=e||window.event
//确定按键
var keyCode=e.keyCode||e.which
//获取target属性：表示所点击的对象
var target=e.target||e.srcElement
//阻止默认事件
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
//阻止事件冒泡
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);

2.3 关于event对象

3. 附录

3.1 常见键盘码

8：delete删除键
9：tab制表符
13：enter回车键
16：shift:上档键
17：ctrl
18:alt
27:esc取消键
32：space空格键

3.2 组合按键

altKey ：alt 键按下得到 true，否则得到 false
shiftKey ：shift 键按下得到 true，否则得到 false
ctrlKey ：ctrl 键按下得到 true，否则得到 false

3.3 鼠标按键信息

e.button
0为鼠标左键
1为鼠标中键
2为鼠标右键

3.4 参考文档

https://www.cnblogs.com/starof/p/4066381.html

Abubliss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EVENT事件对象

文章目录EVENT详解1. 事件流1.1 什么是事件1.2 什么是事件流1.3 两种事件流模型1.3.1 冒泡事件流1.3.2 捕获事件流1.4 事件绑定的方式1.4.1 事件监听2. 事件对象2.1 什么是事件对象2.2 对事件对象的认识2.2.1 获取事件的光标位置2.2.2 确定按键2.2.3 event对象的一些兼容写法2.3 [关于event对象](https://www.w3schoo...
复制链接

扫一扫