深入理解JavaScript事件流与事件处理程序-优快云博客

本文链接：https://blog.youkuaiyun.com/luoxufeng/article/details/7077606

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

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;

javascript事件