zoukankan      html  css  js  c++  java
  • addEventListener()方法

    ★JS事件的捕获阶段和冒泡阶段:

      讨论的主要是两个事件模型:IE事件模型与DOM事件模型

        IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到ParentNode。

          <div id="ancestor">

            <button id="child"></button>

          </div> 

          以上的HTML代码在IE内核下,事件是这样传播的:{

            1、Button#child; 
            2、div#ancestor; 
            3、Body; 
            4、Document 

          } 

        DOM标准的浏览器事件是:捕获事件和冒泡事件。

        捕获事件过程:{

          1、Window 
          2、Document 
          3、Body 
          4、Div#ancestor 
          5、Button#child 

        }

        冒泡事件过程:{

          6、Div#ancestor 
          7、Body 
          8、Document 
          9、Window 

        } 

        当开发者在一个元素上注册了事件后,这个事件的响应顺序是从window(最顶层)开始一级一级的向下传播,然后到了该元素后事件捕获过程结束,事件开如冒泡,一级一级向父层元素冒泡(请注意第6              步)。当然,开发者可以很轻松的决定DOM标准的浏览器中的事件需要在哪个传播过程触发。

        

        DOM标准的浏览器事件注册方法是通过addEventListener方法注册,而IE内核的浏览器则是通过attachEvent方法注册。

        addEventListener方法带有三个参数,分别是:eventType、handler、useCapture。 eventType不带有on字符串; 
          handler参数是一个事件句柄,这个函数或方法带有一个事件对象参数; 
          useCapture参数决定了事件句柄触发在哪种事件传播阶段,如果useCapture为true则为捕获阶段,反之则为冒泡阶段。

        DOM事件对象提供了stopPropagation方法用于阻止事件流。事件流包括捕获阶段及冒泡阶段的事件流。

        IE内核提供了attachEvent方法为元素注册事件,

          该方法带有两个参数:

          {

            eventType 事件类型,请注意这个参数与addEventListener的eventType的区别,它必须带有on; 

            handler 事件句柄 ,请注意attachEvent没有提供事件捕获阶段的参数,IE内核的事件都是发生在冒泡阶段! 

          }

        另外还有一些注意事项:

          1、DOM标准的addEventListener方法执行事件的顺序是按照事件注册的顺序执行的。而attachEvent方法则相反–后注册的事件先觖发,先注册的事件后触发。 

          2、DOM标准的浏览器文本节点也会冒泡,而IE内核的浏览器文本节点不会冒泡。

          3、DOM标准的浏览器事件对象与IE内核的浏览器事件不同(具体请参阅http://www.quirksmode.org/js/introevents.html)。

          4、DOM标准的浏览器事件卸载方式与IE内核的事件卸载方式不同。

            object.removeEventListener(eventType,handler,useCapture);//DOM标准的事件卸载方式 
            object.detachEvent(eventType,handler);//IE内核的事件卸载方式 

            在DOM标准的事件卸载方式中需要注意的是:事件捕获的参数。如果你的事件是注册在捕获阶段,则卸载事件时,必须将其指定为捕获阶段(true),否则无法卸载;如果你的事件注册在注册在冒泡阶                          段,则必须将其指定为冒泡阶段(false),否则同样无法卸载!

     

      

  • 相关阅读:
    Memcached 内存分配机制介绍
    PHP与Memcached服务器交互的分布式实现源码分析
    yii 操作cookie
    Python urllib2递归抓取某个网站下图片
    mysql 知识 show status
    要读的书培根说:历史使人明智,诗词使人巧慧,算学使人精密,哲理使人深刻,伦理学人庄重,逻辑修辞使人善辩。
    思考的技术懒于求知的人没有生存空间
    相约星期二记录
    谁是最重要的人
    Netstat命令详解
  • 原文地址:https://www.cnblogs.com/WebApp-DotNet/p/6432778.html
Copyright © 2011-2022 走看看