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

2023-05-27,

3种事件模型:

   原始事件模型

   DOM事件模型

   IE事件模型

原始事件模型(0级事件模型)

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

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

             btn.onclick = function(){

               函数体....

             }

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

       例子:<input type="button" onclick="alert('hello')"

    

    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对象的属性和方法存在差异!!!

《jQuery学习---------认识事件处理.doc》

下载本文的Word格式文档,以方便收藏与打印。