javascript之DOM事件驱动编程

    

      事件驱动编程中的几个核心对象：

•  事件源：谁发出事件通知，发出消息；也就是事件主体。
•  事件名称：发出什么样的通知的名称，比如鼠标到我头上了，我被别人点了一下；
•  事件响应函数：谁对这个这个事件感兴趣，当这个事件发生时要执行什么样的操作；
•  事件对象：一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数等一起发给响应函数，好让他们通过事件对象来了解事件更加详细的信息。

   1、事件类型：  

        1.1 鼠标事件
        (1)  ‘mousedown’ – 鼠标设备按下一个元素的时候触发mousedown事件。
        (2)  ‘mouseup’ – 鼠标设备从按下的元素上弹起的时候触发mouseup事件。
        (3)  ‘click’ – 鼠标点击元素的时候触发click事件。
        (4)  ‘dblclick’ – 鼠标双击元素的时候触发dblclick事件。
        (5)  ‘mouseover’ – 鼠标移动到某元素上的时候触发mouseover事件。
        (6)  ‘mouseout’ – 鼠标从某元素离开的时候触发mouseout事件。
        (7)  ‘mousemove’ – 鼠标在某元素上移动但未离开的时候触发mousemove事件。
 
       1.2 键盘事件
       (1)  ‘keypress’ – 按键按下的时候触发该事件。
       (2)  ‘keydown’ – 按键按下的时候触发该事件，并且在keypress事件之前。
       (3)  ‘keyup’ – 按键松开的时候触发该事件，在keydown和keypress事件之后。
 
       1.3 表单事件
       (1)  ‘select’ – 文本字段（input, textarea等）的文本被选择的时候触发该事件。
       (2)  ‘change’ – 控件失去input焦点的时候触发该事件（或者值被改变的时候）。
       (3)  ‘submit’ – 表单提交的时候触发该事件。
       (4)  ‘reset’ – 表单重置的时候触发该事件。
       (5)  ‘focus’ – 元素获得焦点的时候触发该事件，通常来自鼠标设备或Tab导航。
       (6)  ‘blur’ – 元素失去焦点的时候触发该事件，通常来自鼠标设备或Tab导航。

       1.4 其它事件
       (1)  ‘load’ – 页面加载完毕（包括内容、图片、frame、object）的时候触发该事件。
       (2)  ‘resize’ – 页面大小改变的时候触发该事件（例如浏览器缩放）。
       (3)  ‘scroll’ – 页面滚动的时候触发该事件。
       (4)  ‘unload’ – 从页面或frame删除所有内容的时候触发该事件（例如离开一个页面）。

   2、事件监听：  

         指对指定对象的指定事件指定响应处理处理函数

         (1)  在html标签中直接绑定，名称一般是on+事件名称,比如说单击事件即为onclick;

               eg: <img src="img/img01.JPG" οnclick="alert('您单击了图片')"> //网页中的事件名称onclick是忽略大小写的

        (2)  把响应函数赋给对象事件, 名称一般也是on+事件名称,比如说obj.onclick = 函数;

              eg: var oDiv = document.getElementById(“div1”);
         oDiv.onclick = function () {
              alert(“I was clicked”);
         };
         或
         Function test(){
              alert(“I was clicked”);
         }
         oDiv.onclick = test;

             注意：test函数不能再加(),否则表示的是获取函数返回的值，而不是函数对象.

        (3)  使用addEventListener或attachEvent绑定多个对象

              W3C DOM标准：
              [Object].addEventListener(“name_of_event”, fnHandler, bCapture);
              [Object].removeEventListener(“name_of_event”, fnHandler, bCapture);
              IE中独有的事件监听方法：
              [Object].attachEvent(“name_of_event_handler”, fnHandler);
              [Object].detachEvent(“name_of_event_handler”, fnHandler);

              注意：两者的第一个参数name_of_event写法不一样,IE中的name_of_event_handler为on+事件名称，比如：onclick
                       W3C标准的name_of_event直接为事件名称，比如：click

              eg:  //DOM标准事件监听
                   var fnClick1 = function () {
                alert(“Clicked!”);
          };
          var fnClick2 = function () {
                alert(“Also clicked!”);
           };
          var oDiv = document.getElementById(“div1”);
                  oDiv.addEventListener(“onclick”, fnClick1,false);
          oDiv.addEventListener(“onclick”, fnClick2,false);
                 删除事件：
                 oDiv.removeEventListener(“click”, fnClick, false);

                    // IE事件监听
                  var fnClick1 = function () {
                        alert(“Clicked!”);
                 };
                 var fnClick2 = function () {
                       alert(“Also clicked! “);
                 };
                 var oDiv = document.getElementById(“div”);
                 oDiv.attachEvent(“onclick”, fnClick1);
                 oDiv.attachEvent(“onclick”, fnClick2);
                 删除事件
                oDiv.detachEvent(“onclick”, fnClick2);
                注意：在IE中，它们是根据增加的顺序倒序执行，即先执行后添加的fnClick2，然后再执行fnClick1，而Firefox中则是相反，先执行fnClick1然后再执行fnClick2   

    3、事件对象的获取：        

          DOM标准中会把事件对象作为参数传递给监听函数，而IE则可以通过window.event来获取。

          (1)  DOM标准中要求事件对象是传给事件响应函数的第一个参数。

                 eg:  oDiv.onclick = function () {
                        var oEvent = arguments[0];
                        //oEvent即为事件对象
                        }
                       或者
                       oDiv.onclick = function (oEvent){
                       //参数oEvent即为事件对象
                        }

         (2)  IE中的事件对象-window.event

                eg:  oDiv.onclick = function () {
                       var oEvent = window.event;
                       //oEvent就是事件对象
                       }

         (3)  DOM标准事件对象的主要成员：         

成员名称	类型	R/W	说明
altKey	Boolean	R	是否按下alt键
button	Integer	R	被按下的鼠标键，0没按，1左,2右,3全按，４中间，5左中,6右中,7左右中
charCode	Integer	R	所按键盘字符的unicode码
clientX/clientY	Integer	R	所按鼠标的客户端x/y座标值，除去工具栏等
ctrlKey	Boolean	R	是否按下ctrl
isChar	Boolean	R	是否是字符
keyCode	Integer	R/W	按下键盘asicc码
pageX/pageY	Integer	R	相对于页面的x/y座标值
screenX/screenY	Integer	R	相对于屏幕的x/y座标值
shiftKey	Boolean	R	是否按下shift
relateTarget	Element	R	第二个相关的dom节点
type	String	R
target	Element	R	事件源
preventDefault()	function	阻止默认事件
stopPropagation()	function	停止事件继续传播

           (4)  IE 事件对象Event的主要成员：

成员名称	类型	R/W	说明
altKey	Boolean	R	是否按下alt键
button	Integer	R	被按下的鼠标键，0没按，1左,2右,3全按，４中间，5左中,6右中,7左右中
charCode	Integer	R	所按键盘字符的unicode码
clientX/clientY	Integer	R	所按鼠标的客户端x/y座标值，除去工具栏等
ctrlKey	Boolean	R	是否按下ctrl
repeat	Boolean	R	是否重复按鼠标键
x/y	Integer	R	相对于页面的x/y座标值
screenX/screenY	Integer	R	相对于屏幕的x/y座标值
shiftKey	Boolean	R	是否按下shift
toElement	Element	R	第二个相关的dom节点
type	String	R	事件类型
srcElement	Element	R	事件源
returnValue	Boolean	R/W	返回false则阻止默认事件
cancelBubble	Boolean	R/W	是否停止事件继续传播

    4、阻止浏览器默认事件

       （1） IE使用oEvent.returnValue = false;  

       （2） DOM使用oEvent.preventDefault();

         eg:   //阻止右键菜单

                document.οncοntextmenu=function(e){        
                        e = e||event;
                        if(e.preventDefault){
                              e.prenventDefault();   //firefox
                        }else{
                             e.returnValue = false;  //IE
                        }

                 }