【前端培养-作业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其实就是发布自定义事件!