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里面制定处理程序

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

所以一般通过绑定js，封装在try-catch块中解决问题

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