事件驱动模型

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事

件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。

1. 事件驱动要素

1.1 事件源

触发事件的元素

1.2 事件

被 JavaScript 侦测到的行为

事件举例：

鼠标点击

鼠标悬浮于页面的某个热点之上

键盘按键

确认表单

在表单中选取输入框

1.3 事件处理函数

事件发生时要进行的操作,又叫做”事件句柄”或”事件监听器”

2. 事件分类

事件类型事件句柄触发时机

鼠标事件

onclick 鼠标点击操作

ondblclick 鼠标双击操作

onmousedowm 按下鼠标按键

onmouseup 抬起鼠标按键

onmousemove 鼠标指针在元素上方移动

onmouseover 鼠标指针进入元素

onmouseout 鼠标指针移出元素

DOMMouseScroll 鼠标滚轮事件(FF)

onmousewheel 鼠标滚轮事件(IE,CHROM)

键盘事件

onkeyup 抬起键盘按键

onkeydown 按下键盘按键

onkeypress 按下或按住键盘按键

表单事件

onsubmit 按下表单的提交按钮

onblur input失去焦点

onfoucs input获得元素

onchange 更改input元素的内容

页面事件

onload 页面加载完成

onunload 文档的载入被撤销(例如页面跳转等情况时)

onbeforeunload 页面刷新或关闭时

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="点我" οnclick="test()"/>

3.3 监听器

IE CHROM,FIREFOX

element.attachEvent(event, function);//添加

element.detachEvent(event, function);//删除

element.addEventListener(event, function, useCapture);//添加

element.removeEventListener(event, function, useCapture);//删除

4. 事件对象

4.1 什么是事件源对象

事件源对象是指event对象，其封装了与事件相关的详细信息.

当事件发生时,只能在事件函数内部访问的对象

处理函数结束后会自动销毁

4.2 获取EVENT对象

IE w3c

事件源对象window.event e

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)

(IE不支持) 不确定的事件源到明确的事件源依次向下触发.

element.addEventListener(event, function, true);//捕获型

element.addEventListener(event, function, false);//冒泡型

DOM标准的事件模型

我们已经对上面两个不同的事件模型进行了解释和对比。DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发

生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒

泡延续到window对象）。

5.2 阻止事件流

IE: event.cancelBubble = true;

FF: event.stopPropagation();

5.3 目标事件源

IE: srcElement

FF: target