javascript事件

来源：互联网发布：linux退出命令编辑：程序博客网时间：2024/06/09 19:01

一事件流：从页面中接收事件的顺序

1、事件冒泡

IE的事件流叫做事件冒泡；即事件开始时由最具体的元素接收、然后逐级向上传播到较不具体的节点。例如html页面：

<html xmlns="http://www.w3.org/1999/xhtml"><head>   <title>事件处理程序（或事件侦听器）</title></head><body><div>  <div id="myDiv">hello,你好。</div></div></body></html>

对应的javascript

    var btnDiv=document.getElementById("myDiv");      btnDiv.onclick=function(event){         alert("这是我点击的，哈哈");         //window.event.cancelBubble=true;//针对IE， 停止事件冒泡         event.stopPropagation();//非IE用的停止事件冒泡的方法      };      document.body.onclick=function(){         alert("Body clicked!!");      }

IE一般用window.event.cancelBubble=true 阻止事件冒泡

而非IE一般用event.stopPropagation()来阻止事件冒泡

运行这段js，会分别弹出"这是我点击的，哈哈" 和 "Body clicked!!" 这是由于事件冒泡引发的.

事件冒泡的顺序是：Element div----》Element body --》Element html --》Document

2、事件捕获

由Netscape Communicato提出的，捕获的顺序和IE的完全相反，即：

捕获的顺序为：Document--》Element html --》Element body--》Element div

3、DOM事件流

“DOM2”事件流包括三个阶段：事件捕获阶段，处于目标阶段、事件冒泡阶段。

即顺序为：Document--》Element html --》Element body--》Element div--》Element body --》Element html --》Document

依次为；事件捕获--》目标阶段--》事件冒泡

Opera、Firefox、Chrome和Safari都支持DOM事件流；IE不支持DOM事件流

二事件处理程序

事件是用户或者浏览器自身执行的某种动作、如：click，load等都是事件的名称；事件处理程序就是响应某个事件的函数。

1、 HTML事件处理程序 例如：

       function showMessage(){         alert("hello world~!");       }<input type="button" value="html事件处理程序" onclick="showMessage();" />

这种方式有两个缺陷：1、时差问题 2、html与javascript代码的紧密耦合

2、 DOM0级事件处理程序

这种方式至今仍然为所有现代浏览器所支持，一是由于简单、二是具有跨浏览器的优势。

这种方式就是将一个函数赋值给一个事件处理程序属性，也被称为是元素的方法，例如：

     var btn=document.getElementById("myBtn");       btn.onclick=function(){         alert(this.id+" hello,you already click me ~!");       }       btn.onclick=null;//即取消事件

这时候的事件处理程序师在元素的作用域中运行的。即：程序中的this引用当前元素。

3、 DOM2级事件处理程序

Firefox,Safari,Chrome,Opera都支持DOM2级事件处理程序，而IE不支持DOM2

DOM2级事件处理程序、定义了addEventListener()和removeEventListener()两个方法用于处理指定和删除事件的程序操作。

这两个方法都接受个参数，要处理的时间名称，作为事件处理程序的函数和一个布尔值。

布尔值为true、则表示在捕获阶段调用事件处理程序，如果为false，则在冒泡阶段调用事件处理程序。例如：

       var btn=document.getElementById("myBtn2");       btn.addEventListener("click",function(){alert(this.id)},false);       btn.addEventListener("click",function(){alert("hello world~");},false);           //由于删除的时候要指定函数的名称，因此对于匿名函数无效，如下       btn.removeEventListener("click",function(){},false);//删除无效，因为为匿名函数             var btn=document.getElementById("myBtn2");       var handler=function(){alert("你好："+this.id);};       btn.addEventListener("click",handler,false);        //取消       btn.removeEventListener("click",handler,false);//有效

4、 IE事件处理程序

IE事件处理程序,IE实现了与DOM中类型的两个方法：attachEvent()和detachEvent()

这两个方法都接受两个参数：事件处理程序的名称和事件处理程序的函数使用attachEvent()方法、事件处理程序会在全局作用域中运行，即this等于window

例如：

       var btnIE=document.getElementById("myBtnIE");       btnIE.attachEvent("onclick",function(){alert(this===window);});       btnIE.attachEvent("onclick",function(){alert("hello,this is second click");});       //IE事件处理程序也可以添加多个事件处理程序，但是这些事件处理程序师以相反的顺序被触发       //即上面的会先弹出"hello,this is second click",然后再弹出true              //使用attachEvent()添加的可以通过detachEvent()来移除，条件是必须提供相同的参数，因此添加的匿名函数也不可以移除       btnIE.detachEvent("onclick",function(){});//无效

5、跨浏览器的事件处理程序

由于DOM和IE中的Event对象不同，但是基于它们之间的相似性可以拿出跨浏览的方案来，例如：

//跨浏览器的事件处理程序 var EventUtil={         addHandler:function(element,type,handler){            if(element.addEventListener){               element.addEventListener(type,handler,false);            }else if(element.attachEvent){               element.attachEvent("on"+type,handler);            }else{               element["on"+type]=handler;            }         },                  removeHandler:function(element,type,handler){           if(element.removeEventListener){              element.removeEventListener(type,handler,false);           }else if(element.detachEvent){              element.detachEvent("on"+type,handler);           }else{             element["on"+type]=null;           }         },         getEvent:function(event){            return event?event:window.event;         },                  getTarget:function(event){            return event.target || event.srcElement;         },                 preventDefault:function(event){          if(event.preventDefault){             event.preventDefault();          }else{            event.returnValue=false;          }        },                stopPropagation:function(event){          if(event.stopPropagation){             event.stopProgagation();          }else{             event.cancelBubble=true;          }        }       };

这些方法都封装在EventUtil对象中，例如：利用上述封装的方法，写一个跨浏览器的例子；

事件对象、DOM中的事件对象，如果需要一个函数处理多个函数，可用type属性

  var btnType=document.getElementById("btnType");       var handler=function(event){           var eventType=EventUtil.getEvent(event).type;          switch(eventType){             case "click":             alert("Clicked");             break;             case "mouseover":             event= EventUtil.getEvent(event);             var target=EventUtil.getTarget(event);             target.style.backgroundColor="red";             break;             case "mouseout":             event= EventUtil.getEvent(event);             var target=EventUtil.getTarget(event);             target.style.backgroundColor="";             break;          }       };       btnType.onclick=handler;       btnType.onmouseover=handler;       btnType.onmouseout=handler;