zoukankan      html  css  js  c++  java
  • 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其实就是发布自定义事件!

  • 相关阅读:
    会计期间勿关闭后台打开
    动态创建VIEW
    约束变量
    JS 图片懒加载
    如何在Javascript中对数组的遍历使用异步函数
    JavaScript之闭包
    面试:数组去重你会几种呀?
    JavaScript重构技巧-降低函数复杂度
    JavaScript的内置对象
    js/jQuery获取data-*属性值
  • 原文地址:https://www.cnblogs.com/webhelper/p/5642012.html
Copyright © 2011-2022 走看看