jQuery学习---------认识事件处理

3种事件模型：

   原始事件模型

   DOM事件模型

   IE事件模型

原始事件模型（0级事件模型）

    1、事件处理程序被定义为函数实例，然后绑定到DOM元素事件对象上，实现事件的注册。

       例子：var btn = document.getElementsByTagName("input")[0];

             btn.onclick = function(){

               函数体....

             }

    2、也可以把特定的事件处理函数的函数体直接赋给DOM元素的事件属性

       例子：

    

    0级事件模型的优缺点：

       优点：使用方便

       缺点：元素属性被用来存储事件处理函数的引用，

             所以每个元素的每个事件只能注册一个事件处理程序。

DOM事件模型：

    1、注册事件

       addEventListener(）方法：

         语法：addEventListener("type",function,useCapture)

         参数：type：是要绑定的事件类型，但是这里没有“on”前缀。

                     如onclick事件应写作：click

               function：事件处理函数，自带一个默认参数，引用event对象

               usrCapture：是一个布尔值，

                           为true时：在事件传播的捕捉阶段触发响应；

                           为false时：在事件传播的冒泡阶段触发响应

     

        例子：var btn = document.getElementsByTagName("input")[0];

      btn.addEventListener("click",function(){

     btn.value = event.type;

          },true)

    

     2、事件传播

        DOM 2级事件模型中，一旦事件被触发，事件流首先从DOM树的顶部（文档节点#document）向下传播，直到目标节点，然后再从目标节点向上传播到DOM树顶。

        从上到下的过程被称为捕获阶段，

        从下到上的过程被称为冒泡阶段。

        终止事件流的冒泡：stopPropagegation()方法

        例子：var btn = document.getElementsByTagName("input")[0];

        do{

  btn.addEventListener("click",function(){

  div.innerHTML += " "+this.nodeName+" ";

  },true)

  btn = btn.parentNode;

  }while(btn);

             

             上例中，第三个参数设置为true，注册的是捕获型事件。

                     所以点击按钮，事件触发顺序为：#document->html->body->button

               如果，第三个参数设置为false，注册的是冒泡型事件。

                     所以点击按钮，事件的触发顺序为：button->body->html->#document

    3、销毁事件

           removeEventListener()方法：

           注意：removeEventListener（）和addEventListener()的第三个参数要保持一致

                 否则销毁操作是无效的。

IE事件模型：

    1、注册事件：

           attachEvent()方法：

              语法：attachEvent("type",function)

              参数：type：元素事件类型，如：onclick

                    function：事件处理函数

       注意：IE时间模型中，事件处理函数中的this指针总是指向window对象，

             0型事件模型中，事件处理函数中的this指针总是指向当前注册事件的对象

   2、事件传播：

          IE事件模型：事件流总是从目标对象向上传递知道树顶，即冒泡型。

          终止事件流的冒泡：设置event对象的cancelBubble属性

   3、注销事件：

          detachEvent()方法

事件处理机制：

    Event对象：

       当触发事件时，浏览器会自动创建一个event对象，

                     event对象实际上是Event类型的实例，

                     默认状态下他会被作为参数传递给事件处理函数

       实现访问的兼容性：

           var event = event||window.event；

       注意：IE和DOM标准浏览器返回的event对象的属性和方法存在差异！！！