事件

事件处理程序：

1.DOM0级

      var btn = document.getElementById("myBtn"); 

       btn.onclick = function(){  

                      alert("Clicked");

       }

2. DOM2级

 var btn = document.getElementById("myBtn"); 

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

        alert(this.id); //true 

  },flase);

 

3.IE： attachEvent()和detachEvent() 方法,在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域---DOM0：事件处理程序会在其所属元素的作用域内运行； IE：在全局作用域中运行，因此this 等于 window，如下列</p> 

 

var btn = document.getElementById("myBtn"); 

btn.attachEvent("onclick",function(){ 

     alert(this ===window); //true 

});

 

4. 跨浏览器：自己编写代码能够隔离浏览器js的差异

var EventUtil = { 

    addHandler : function(element,type,handler){ 

       if(element.addEventLister){ 

          element.addEventLister(type,handler,false); 

       }else if(element.attachEvent){ 

          element.addachEvent("on" + type,handler); 

       }else{ 

         element["on" + type] = handler; 

       } 

    }  };

使用：

 var btn = document.getElementById("myBtn");

  var handler = function(){

          alert("Clicked");

  };

 EventUtil.addHandler(btn,"click",handler); 

 

事件对象：

 1.DOM0级和DOM1级：  在触发DOM上的某个事件时，会产生一个事件对象event,包含所有与事件有关的信息，包括事件的元素、类型，以及其他与特定事件相关的信息

 

var btn = doucment.getElementByid("myBtn"); 

          btn.onclick = function(event){alert(event.type); 

}   //“click”  

 

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

     alert(event.type);    //"click" 

}) 

 

通过一个函数处理多个事件

var btn = document.getElementById("myBtn"); 

   // alert(typeof(btn)); 

    btn.onclick = handler; 

    btn.mouseover = handler; 

    btn.mouseout = handler; 

    var handler = function(event){ 

        switch(event.type){ 

            case "click": 

               alert("Clicked"); 

               break; 

            case "mouseover": 

               event.target.style.backgroundColor = "red"; 

                break; 

            case "mouseout": 

                 event.target.style.backgroundColor = ""; 

                break; 

       } 

    }; 

 

 

事件类型： 

1. 鼠标事件：

      click;  dbclick;   mousedown;  mouseout;  mouseover;  mouseup;  mousemove;

2. 键盘事件：

    keydown   keypress  keyup  (根据keyCode) 

3. html事件

    load  unload  abort  error  select(当用户选择文本框（input、texterea）一个或多个字符时)   change（（input、texterea）失去焦点或获得焦点后其值被改变时触发）  submit（<form>元素提交）   reset  resize（窗口或框架大小变化时）  scroll（滚动 带滚动条的元素中的内容时）  focus（获得焦点时）  blur （失去焦点时）