JavaScript事件机制
【前端培养-作业01】javascript事件机制
1.javascript事件模型
2.e.target与e.currentTarget是干什么的？
3.preventDefault与stopPropagation是干什么的
4.什么是dispatchEvent？
5.说一说事件代理的实现，并封装一个方法
6.事件代理的问题<li><span></span></li>如果同时给span与li绑定事件该如何组装冒泡？？？
7.tap事件是如何实现的
8.tap会产生什么问题
9.zepto的touch库做了什么？
10.fastclick解决了什么问题
11.实现一个滑动touch库
PS:【前端培训-xx】系列是由上海-叶小钗针对成都几个前端培训的题目
--------------------------------------------------------------------------------------------------
前言：我花了好几个小时百度和google"javascript事件模型",没有查到一个明确对"javascript事件模型"定义的文章。姑且认为它就是高三中的"事件流"吧。对JavaScript术语，我表示有些头疼，经常同一个东西在不同书籍或者不同博客中说法不一致。比如，1.JavaScript数据类型，在JavaScript高级程序设计第三版（再次出现此书用高三代替）中写到"ECMAScript中有5种简单的数据类型（也称为基本数据类型）:Undefined、Null、Boolean、Number和String，还有一种复杂数据类型--Object"。而JavaScript权威指南（第6版）中把高三中定义的"简单数据类型"叫做"原始数据类型"。2.JavaScript事件处理程序又名事件句柄、事件监听器等等。。。也可能是我理解能力太差了！囧
一、javascript事件模型（我理解为事件流）
1.事件冒泡
IE浏览器的事件流叫做事件冒泡（event bubbling），即事件开始由目标节点接收，然后沿着dom树向上传播直到document节点，在每个节点都会触发该事件，如果每个节点都绑定了事件处理函数，那么他们都会被触发。
比如在上面的文档eventFlow，当你点击div这个元素，它的事件顺序会按照下面的顺序传播：
div --> body --> html --> document
但浏览器实现上有所差异，现代的浏览器都会继续往上传播到window。
div --> body --> html --> document --> window
2.事件捕获
Netscape Communicator团队提出的另外一种事件流叫：事件捕获（event capturing），这个事件流的实现与IE事件流恰好相反，事件开始由document接收，然后沿着dom树向下传播直到目标节点。
点击eventFlow文档中的div元素，它的事件会按照下面的顺序传播：
document --> html --> body --> div
和冒泡事件流相似，现代浏览器最开始接收事件应该是window
window --> document --> html --> body --> div
3.DOM事件流
不同浏览器实现的事件流方式不一致，再实际应用中会导致不必要的麻烦，所以W3C规范了事件流。"DOM2事件"规定的事件流包含三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件传播的顺便如下：
window --> document --> html --> body --> div --> body --> html --> document --> window
实际上现代浏览器默认事件流都是在冒泡阶段触发事件，要想在捕获阶段触发事件可以通过addEventListener(type, fn, isCapture),第三个参数isCapture设置为true实现。
二、 e.target与e.currentTarget是干什么的？preventDefault与stopPropagation是干什么的？
在触发DOM事件时会产生一个事件对象event，早期的IE event对象保存在window的属性里，现代浏览器都作为监听函数的回调参数返回。这个event对象里包含了一切相关的属性和方法。其中：
event.target 是代表这个事件的目标节点对象。
event.currentTarget 是代表当前发生事件的节点对象，只有在处于目标阶段event.target和event.currentTarget才相等。
event.preventDefalt() 是用来阻止触发节点的默认事件，比如A标签的href跳转，form的submit。
event.stopPropagation() 是用来阻止事件继续传播（包括冒泡和捕获都能阻止）。
event.stopImmediatePropagation() 这个阻止事件继续传播并且阻止任何事件处理程序被调用（比如一个节点注册多个事件监听器，其它事件监听器是不会被触发的）。
三、什么是dispatchEvent？
如上代码，dispatchEvent其实就是发布自定义事件！
