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其实就是发布自定义事件!

原文地址:https://www.cnblogs.com/webhelper/p/5642012.html