文章目录
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为鼠标右键