html、css、js入门-18-js基础9：event与事件

 

事件概述

   .  事件:指 DHTML 对象在状态改变、操作鼠标或键盘时触发的动作

        -- 鼠标事件
        -- 键盘事件
        -- 状态改变事件
        

   .  event 对象
 
        -- 事件触发后将会产生一个 event 对象

 

事件句柄:

                       对象事件

      鼠标事件         键盘事件        状态事件

     onclick          onkeydown       onload
     ondbclick        键盘按下        onunload
     onmouseup        onkeyup         onchange
     onmouseover      键盘弹起        onfocus
     onmouseout                       onblur
                                      onresize
                                      onsubmit

 

 

事件定义

      .   取消事件:  onXXX = "return false;"

      .   在属性定义中直接处理事件

       <Input type="button" value="按钮" οnclick="method();">

      .  代码中动态定义
 
         //btmObj 为一个按钮对象

          btnObj.οnclick=method;
         //或

          btnObj.οnclick=function(){
                alert("hello");
          };

 

 

事件的处理机制

    事件的处理机制

   . 事件的冒泡处理机制       

       当处于DHTML 对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理

 

     document           οnclick="alert('click doc')"

      form              οnclick="alert('click form')"

     input              οnclick="alert('click input')"

 

 

event 对象

   .  任何事件触发后将会产生一个event 对象

   .  event 对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息

          -- 获得 event 对象
          -- 使用 event 对象获得相关信息，如单击位置、触发对象等

   .  常用属性: clientX/clientY 等
     

 

使用 event 对象

  .  获得  event 对象

         -- IE 等浏览器:直接使用 event 关键字

  .  获得事件源

         -- IE 等浏览器: event.srcElement

      <div οnclick="func();">div text</div>
 

     // IE 浏览器

       function func(){
          alert(event.clientX+":"+event.clientY);
          alert(event.srcElement.nodeName);//DIY
       }

 

 

使用 event 对象

   .  获得 event 对象

          --  Firefox 浏览器:在事件句柄定义中，使用 event 关键字将事件对象
          作为参数传入方法    

   .  获得事件源

          -- Firefox 浏览器:event.target

       <div οnclick="func(event);">div text</div>

       // firefox 浏览器

        function func(e){
           alert(e.clientX + ":" + e.clientY);
           alert(e.target.nodeName); //DIV

        }   

 

使用 event 对象

  .  考虑个浏览器的兼容性

      <div οnclick="func(event);">div text</div>

      // 兼容各浏览器

      function func(e){
         alert(e.clientX+":"+e.clientY);
         var obj=e.srcElement||e.target;
         alert(obj.nodeName);//DIV
      }            

 

项目案例:

    简单计算器

    使用event 对象简化简单计算器的界面设计及实现