js高级程序设计 第十三章 事件

本文目的主要是为了理解概念、记住脉络，代码实现方面须要本身多练习
另外，我会不断修改完善内容，以后也会陆续附上一些拓展材料来弥补文章内容的缺失

什么是事件：

定义：事件就是文档或浏览器窗口中发生的一些特定的交互，好处不用说
概念：使用'侦听器'来预约时间，被称为'观察员模式'
使用：支持页面行为（js）和页面外观（html 和 css代码）之间的松散耦合

事件有两种方式实现：
在html中直接绑定
在js中指定属性

事件与事件流：

解决的思路：区分究竟是什么地方接收到这个交互，又是什么地方须要处理这个交互，因此提出事件流的概念
实现方式：事件冒泡和事件捕获（这个我以为很容易理解）
书里先把DOM2的事件模型提出来单独举例里，DOM2事件流分为三个阶段：
事件捕获1 ，目标阶段2 和事件冒泡3

事件处理程序

事件就是用户或浏览器执行某些东西，那么响应这个事件的函数，就叫作事件处理程序（事件监听器），通常在前面加on

还记得以前说说，事件有两种实现方式：
html直接包含要执行的具体动做：
<input type='button' value="Click Me" onclick=" alert('Clicked') " />

或者是调用js函数
<script type="text/javascript">
function showMessage(){
alert('Hello world');
}
</script>

<input type="button" value="Click Me" onclick="showMessage()" />

事件对象

概念：当一个事件被触发时，会建立一个事件对象即Event Object，既然是对象，就有属性和方法，event的对象就是用在这个事件上的属性和方法，会做为参数传递给监听函数的

DOM的事件对象

type 用于获取事件类型
target 获取事件目标
stopPropagation() 阻止事件冒泡/捕获
preventDefalut() 阻止事件默认行为（只有cancelable属性设置为true的事件，才能够用preventDefault()来取消默认行为）
eventPhase属性，用来肯定事件当前处于事件流的什么阶段，1 捕获，2 调用，3冒泡

IE中的事件对象

cancelBubble -- 参考stopPropagation
returnValue 默认为true 设置为false时取消事件的默认行为 -- 参考preventDefault
srcElement --参考target
type

事件模型：

DOM 0 元素的方法 ['on'+type]

每一个元素（包括window和document）都有本身的事件处理程序属性，处理程序是在元素的做用域中运行的

IE事件模型

attachEvent()和detachEvent()
只接收两个参数，事件，和事件处理函数，默认添加到冒泡阶段

注意哦，这个事件是onclik类型的，这个跟DOM0的区别就在做用域
**DOM的做用域是元素的做用域
IE事件的做用域，是全局做用域**

还有烦的地方是，添加两个attachEvent()，执行顺序是反向的，就是后加上的先执行

呐，detachEvent()移除的条件跟DOM2是同样的，参数必须一致，匿名函数没法益处

DOM2 事件模型

addEventListener(）和removeEventListener()，全部DOM节点都包含这两个方法
接收三个参数：事件名，处理程序的函数 和 布尔值（true时捕获阶段调用，false是冒泡阶段调用）

var btn=document.getElementById('myBtn');
btn.addEventListener('click',function(){xx},false);

若是添加了两个时间处理程序，依次进行（这个很合理），
一样经过addEventListener的 须要经过removeEventListener进行移除
拓展一下（经过addEventListener()添加的匿名函数将没法移除，这是由于remove须要跟add添加同样的参数，而add若是传入了匿名函数，remove写入的也是一个彻底不一样的函数了）

最后 文末综述了一个能用的EventUtil函数，把DOM 0 ，DOM2和IE都包进去，作成addEventListener和removeEventListener

碎碎念 理解为何不在html里面制定处理程序

一、可能页面加载完成但处理程序没有加载完，会出现时间差甚至抛出错误
二、这样扩展事件处理程序的做用域链在不一样浏览器中会致使不一样结果。不一样JavaScript引擎遵循的标识符解析规则略有差别，极可能会在访问非限定对象成员时出错（这个个人理解是，在js里面，能够根据不一样的事件模型作对应的操做，并封装在一个包里，这样用不会出错，可是在html里面可没有这个技术）
三、html和javascript紧密耦合后，若是要更换就太麻烦了

因此通常经过绑定js，封装在try-catch块中解决问题

拓展阅读
https://segmentfault.com/a/11...