Event事件

Posted 2020-08-16

# 事件驱动模型 #
javascript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。
###1. 事件驱动要素###
**1.1 事件源**
触发事件的元素
**1.2 事件**
被 JavaScript 侦测到的行为

>事件举例：
- 鼠标点击
- 鼠标悬浮于页面的某个热点之上
- 键盘按键
- 确认表单
- 在表单中选取输入框

**1.3 事件处理函数**
事件发生时要进行的操作,又叫做"事件句柄"或"事件监听器"

###2. 事件分类###
<table style="font-size:14px;width:1000px;text-align:center;"><tr><th>事件类型</th><th>事件句柄</th><th>触发时机</th></tr><tr><td rowspan="9">鼠标事件</td><td>onclick</td><td>鼠标点击操作</td></tr><tr><td>ondblclick</td><td>鼠标双击操作</td></tr><tr><td>onmousedown</td><td>按下鼠标按键</td></tr><tr><td>onmouseup</td><td>抬起鼠标按键</td></tr><tr><td>onmousemove</td><td>鼠标指针在元素上方移动</td></tr><tr><td>onmouseover</td><td>鼠标指针进入元素</td></tr><tr><td>onmouseout</td><td>鼠标指针移出元素</td></tr><tr><td>DOMMouseScroll</td><td>鼠标滚轮事件(FF)</td></tr><tr><td>onmousewheel</td><td>鼠标滚轮事件(IE,CHROM)</td></tr><tr><td rowspan="3">键盘事件</td><td>onkeyup</td><td>抬起键盘按键</td></tr><tr><td>onkeydown</td><td>按下键盘按键</td></tr><tr><td>onkeypress</td><td>按下或按住键盘按键</td></tr><tr><td rowspan="4">表单事件</td><td>onsubmit</td><td>按下表单的提交按钮</td></tr><tr><td>onblur</td><td>input失去焦点</td></tr><tr><td>onfoucs</td><td>input获得元素</td></tr><tr><td>onchange</td><td>更改input元素的内容</td></tr><tr><td rowspan="3">页面事件</td><td>onload</td><td>页面加载完成</td></tr><tr><td>onunload</td><td>文档的载入被撤销(例如页面跳转等情况时)</td></tr><tr><td>onbeforeunload</td><td>页面刷新或关闭时</td></tr></table>

###3. 事件绑定###
**3.1 JavaScript脚本中绑定事件**
```
html:
<input type="button" id="btn" value="点我"/>
JavaScript:
var btn = document.getElementById("btn");
方式1:
btn.onclick = function() {}
方式2:
function test() {
console.log(123);
}
btn.onclick = test;
```
**3.2 标签中绑定事件**
```
<input type="button" id="btn" value="点我" onclick="test()"/>
```
**3.3 监听器**
<table style=‘width:800px;font-size:14px;text-align:center;‘><tr><th>IE</th><th>CHROM,FIREFOX</th></tr><tr><td>element.attachEvent(event, function);//添加
element.detachEvent(event, function);//删除</td><td>element.addEventListener(event, function, useCapture);//添加
element.removeEventListener(event, function, useCapture);//删除</td></tr></table>

###4. 事件对象###
**4.1 什么是事件源对象**

事件源对象是指event对象，其封装了与事件相关的详细信息.
- 当事件发生时,只能在事件函数内部访问的对象
- 处理函数结束后会自动销毁

**4.2 获取EVENT对象**
<table style="width:800px;font-size:14px;text-align:center;"> <tr><th></th><th>IE</th><th>w3c</th></tr><tr><td>事件源对象</td><td>window.event</td><td>e</td></tr></table>

**4.3 EVENT对象的属性**

**4.3.1 鼠标事件**
- 相对于浏览器位置
event.clientX: 返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标
event.clientY: 返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标

- 相对于屏幕位置
event.screenX: 返回事件发生时鼠标指针相对于屏幕的水平坐标
event.screenY: 返回事件发生时鼠标指针相对于屏幕的垂直坐标

- 相对于事件源位置
event.offsetX: 返回事件发生时鼠标指针相对于事件源的水平坐标
event.offsetY: 返回事件发生时鼠标指针相对于事件源的垂直坐标
event.layerX: 返回事件发生时鼠标指针相对于事件源的水平坐标(FIREFOX)
event.layerY: 返回事件发生时鼠标指针相对于事件源的垂直坐标(FIREFOX)

**4.3.2 键盘事件**
- keyCode: 获取按下的键盘按键的值的字符代码
- altKey: 指示在指定的事件发生时，Alt 键是否被按下
- ctrlKey: 指示当事件发生时，Ctrl 键是否被按下
- shiftKey: 指示当事件发生时，"SHIFT" 键是否被按下

**4.3.3 type属性**
用来检测事件类型

###5 事件流###
当页面元素触发事件的时候, 该元素的容器以及整个页面都会按照特定的顺序响应该元素的触发事件,事件传播的顺序叫做事件流.

**5.1 事件流的分类**
- **冒泡型事件(Event Bubbling)**
所有浏览器都支持,由明确的事件源到最不确定的事件源依次向上触发.

- **捕获型事件(Event Capturing)** <br>
(IE不支持) 不确定的事件源到明确的事件源依次向下触发.
```
element.addEventListener(event, function, true);//捕获型
element.addEventListener(event, function, false);//冒泡型
```

- **DOM标准的事件模型**<br>我们已经对上面两个不同的事件模型进行了解释和对比。DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象）。<br>

**5.2 阻止事件流**

IE: event.cancelBubble = true;

FF: event.stopPropagation();

**5.3 目标事件源**
IE: srcElement
FF: target