事件

事件：是文档或浏览器窗口中发生的一些特定的交互瞬间，是用户或浏览器自身执行的某种操作。Javascript和HTML之间的交互是通过事件来实现的。

           浏览器事件发生时不是指单单发生在一个元素上，也发生在嵌套元素上。（比如，点击一个按钮，那么按钮，body元素，html元素，document都发生了事件）

事件流：描述的是从页面中接收事件的顺序。包括事件冒泡流和事件捕获流。

               事件冒泡流：事件刚开始由具体的元素接收，然后逐级向上传播为较不具体的节点（文档）

               事件捕获流：事件最早由不具体的节点（文档）接收，最后由最具体的元素接收到事件。

DOM2级事件规定事件流包含三个阶段：事件捕获阶段，处于目标阶段（最具体的元素）和事件冒泡阶段。

事件处理程序：响应某个事件的函数，每一个元素都有自己的事件处理程序。方式如下：

         ① 使用与相应事件处理程序同名的HTML特性来指定。

          

          

           还可以调用被包含在外部文件中的函数，事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

          该方式的优点是：1、会创建一个封装着元素属性值的函数，该函数有一个局部变量event，通过event可以访问事件对象。

          在该函数内部，this值等于事件的目标元素（即调用该事件处理程序的元素）

         

                                    2、创建这个动态的函数的扩展作用域的方式。可以像访问局部变量一样访问document及该元素本身的成员

         

           如果是表单元素，会多一个访问表单元素（父元素）的入口。这样可以访问表单的其他字段。

          

           

         ② Javascript的传统方式（DOM0级事件处理程序），即将一个函数赋值给一个事件处理程序。该事件处理程序被认为是元素的方法，所以该事件处理程序（函数）是在该元素的作用域内运行的。即this指向的是当前对象。这种方式增加的事件处理函数会在事件流的冒泡阶段被处理，或者自己将事件处理程序设置为null，btn.οnclick=null;

         ③（DOM2级事件处理程序）。使用addEventListener(  要处理的事件名，作为事件处理程序的函数,布尔值  )--添加事件处理程序和removeEventListener(  要处理的事件名，作为事件处理程序的函数,布尔值  )--删除事件处理程序。布尔值为true代表捕获阶段调用事件处理函数，为false代表冒泡阶段调用事件处理程序。所有DOM节点都包含这两个方法。好处是：可以添加多个事件处理程序，该事件处理程序也是运行于元素的作用域。

           如下的事件处理程序是按照顺序运行的。即结果是btn    结束

          

        注意：1、addEventListener()添加的事件处理程序必须通过removeEventListener()移除，且传入的参数要和addEventListener()一样。所以这里就不能用匿名函数了。

                    2、在没有特殊情况下，在冒泡阶段调用事件处理程序比较好，这样可以兼容大多数浏览器。

          

      ④ IE中的事件处理程序。使用attachEvent(  事件处理程序名称，事件处理程序函数  )--添加事件处理程序 和detachEvent(  事件处理程序名称，事件处理程序函数  )--移除事件处理程序，该事件处理程序被添加到冒泡阶段。注意：事件处理程序的名称是onclick，在全局作用域中运行，即this为window，也可以添加多个事件处理函数（但以相反的顺序被执行）。

      ⑤ 跨浏览器的事件处理程序。使用位于EventUtil对象的addHandler(  要操作的元素，事件名称，事件处理程序函数  )和removeHandler(  要操作的元素，事件名称，事件处理程序函数  )方法。

         

事件对象(event)：在触发DOM上的某个事件时，会产生一个DOM对象event，这个对象中包含着所有与事件有关的信息。兼容DOM的浏览器会像事件处理程序（函数）传入（自动传入）event对象。

event对象包含与创建他的特定事件有关的属性和方法。常用的属性和方法如下：

        1. cancelable：表明是否可以取消事件的默认行为。

        2. currentTarget：存放事件处理程序的那个元素。

        3. eventPhase：调用事件处理程序的阶段，1 表示捕获节阶段   2 表示“处于目标阶段”  3 表示冒泡阶段

        4. target：事件的目标（元素）

        5. type：被触发的事件的类型

        6. preventDefault()：取消事件的默认行为，如果cancelable为true则可以执行该函数

        7. stopPropagation()：取消事件的进一步捕获或者冒泡，同时阻止任何处理程序被调用

        

   情况一：事件处理程序在本节点中：currentTarget、target、this的值是相同的。

       

    情况二：事件处理程序在父节点中

       

   注意：通过一个函数处理多个事件时，可以使用type属性。如下：

       

      阻止超链接的默认跳转：

       

IE中的事件对象：

        访问IE中的事件对象，取决于指定事件处理程序的方法。

        ① 使用DOM0级方法调用事件处理程序，访问event要获取window.event

        ② 使用attachEvent()或者HTML代码调用事件处理程序，会自动添加event对象至事件处理程序中。