zoukankan      html  css  js  c++  java
  • javascript事件

    1.事件流

       事件流是描述从页面中接收事件的顺序。

     

       事件流类型:

          事件冒泡和事件捕获

          1IE的事件流叫做事件冒泡:(从下往上传递知道document元素)

                 即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点

                 所有浏览器都支持事件冒泡,但是IE5冒泡时会跳过html元素

          2)事件捕获(从文档节点document从上往下传递)

     

      DOM中的事件流:

          “DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。

     

    2.事件对象(event对象)

      DOM中的事件对象:

           该对象可以直接使用event访问。

           几个重要的属性:

              currentTarget:和对象的this值一样,指向绑定该事件的元素

              target:指向当前元素,如:点击事件,指向被点击的元素

               注意:函数内部的this值,不一定等于event.target

              type:事件的类型,返回的值没有前缀“on

              eventPhase:用来确定事件当前正处于事件流的哪个阶段。

                         值为1:事件处理程序处于捕获阶段

                         值为2:事件处理程序处于目标对象上

                         值为3:事件处理程序处于冒泡阶段

           几个重要的方法:

               preventDefault()阻止事件的默认行为。但是只有在cancelable属性为true的事件,才能使用该方法。

               stopPropagation()阻止事件在DOM中的传播,即取消事件捕获或冒泡

       IE中的事件对象:

           访问IE中的event对象的几种方法:

               1DOM0级添加的事件处理程序,event对象通过window.event获得

               2)通过attachEvent()添加的事件处理程序,event对象通过传入的event参数获得

               3HTML事件处理程序,event对象直接使用event获取

           几个重要的属性:

               srcElement:指向当前元素,类似于target

               returnValue:为false时,阻止事件默认行为

               cancelBubble:为false时,阻止事件冒泡

     

       跨浏览器的事件对象:

           如下:event = event || window.event

               

    3.事件处理程序

      为某个元素绑定某个事件处理程序的方法:

          1HTML事件处理程序

             将事件直接添加在标签里

             缺点:时差问题,当点击元素时,事件处理函数还未加载,会导致错误。解决:使用try-catch

                   Javascript代码和HTML紧耦合;

                   不同浏览器对同一事件处理程序,可能存在不同的解析结果。

          2DOM0级事件处理程序(会在冒泡阶段被处理)

             首先获得对象的引用,然后为他的事件属性赋值。如:btn.onclick = function(){......};

             事件处理函数中:this引用当前元素

             删除事件处理程序:将属性值设为null;如:btn.onclick = null;

          3DOM2级事件处理程序

             添加事件:addEventListener( eventType, handler, capture )

             删除事件:removeEventListener( eventType, handler, capture )

             优点:可以添加针对于同一事件的多个事件处理程序,事件处理时,会按照添加的顺序依次处理。

             注意:添加的事件只能通过删除方法来删除,且,如果添加的事件使用的是匿名函数,该事件无法移除。

                   this对象指向当前元素,因为,事件处理程序在所属元素的作用域中运行。

          4IE事件处理程序(只在冒泡阶段处理)

             添加事件:attachEvent( eventType, handler )

             删除事件:detachEvent( eventType, handler )

             注意:eventTypeDOM2级相比,有前缀“on”。

                   同样可以添加针对同一事件的多个事件处理程序,但是,事件处理时,会根据添加的顺序,以相反的顺序处理。

                   this对象等于window。因为IE中使用attachEvent()方法,事件处理程序在全局作用域上运行。

     

       编写跨浏览器事件处理程序

           如下:

               addHandler : function( element,eventType,handler ){

                   if( element.addEventListener ){

                      element.addEventListener( eventType,handler,false );

                   }else if( element.attachEvent ){

                      element.attachEvent( 'on'+eventType,handler );

                   }else{

                      element['on'+eventType] = handler;

                   }

               },

               removeHandler : function( element,eventType,handler ){

                  if( element.removeEventListener ){

                      element.removeEventListener( eventType,handler,false );

                  }else if( element.detachEvent ){

                      element.detachEvent( 'on'+eventType,handler );

                  }else{

                      element['on'+eventType] = null;

                }

            }

             注意:这样编写的代码,要注意作用域的问题,DOM2级和IE事件处理程序,添加事件后,事件处理程序的作用域不同。

                   所以不推荐使用this来访问当前元素。

    代码地址:https://github.com/xiaoxiaojing/practiseCode/blob/master/function/event.js

     

  • 相关阅读:
    前沿技术解密——VirtualDOM
    Ques核心思想——CSS Namespace
    Unix Pipes to Javascript Pipes
    Road to the future——伪MVVM库Q.js
    聊聊CSS postproccessors
    【译】十款性能最佳的压缩算法
    Kafka Streams开发入门(9)
    Kafka Streams开发入门(8)
    【译】Kafka Producer Sticky Partitioner
    【译】99th Percentile Latency at Scale with Apache Kafka
  • 原文地址:https://www.cnblogs.com/xiaoxiaojing/p/4019913.html
Copyright © 2011-2022 走看看