淺談JavaScript的事件（事件類比）

標籤：修改   方法   targe   llb   console   useragent   comm   create   複數   

　　事件經常由操作或者通過瀏覽器功能觸發，通過JavaScript也可以觸發元素的事件。通過JavaScript觸發事件，也稱為事件的類比。

• DOM中事件類比

　　可以document的createEvent方法建立event對象。這個方法接收一個參數，即表示要建立的事件類型的字串。在DOM2級中，所有這些字串都使用英文複數形式，在DOM3級中都變成了單數。這幾個字串如下：UIEvents，一般化的ui事件，滑鼠事件和鍵盤事件都繼承於該事件，在DOM3級中是UIEvent；MouseEvents，一般化的滑鼠事件，在DOM3級中是MouseEvent；MutationEvents，DOM變動事件DOM3級是MutationEvent；HTMLEvents，html事件，沒有對應的DOM3級。

　　在建立了event對象後，還需要使用與事件有關的資訊對其進行初始化。每種類型的event都有一個對應的方法，為其傳入一個參數就可以初始化事件對象。類比事件的最後一步是觸發事件，觸發事件使用dispatchEvent方法，所有支援DOM事件的節點都支援該方法。調用dispatchEvent方法需要傳入一個參數，即表示要觸發事件的event對象。

　　建立滑鼠事件對象，並為其指定必要的資訊，就可以類比滑鼠事件。建立滑鼠事件的對象方法是createEvent方法，傳入的參數是MouseEvents。返回的event對象有一個initMouseEvent方法，用於指定與滑鼠事件有關的資訊。這個方法接收15個參數，分別與滑鼠事件中典型的屬性一一對應，屬性如下：type，表示要觸發的事件類型，如“click”；bubbles，是否支援冒泡，如true；cancelable，表示事件是否可以取消，如true；view，事件關聯的視圖，一般是document.defaultView；detail，與事件有關的詳細資料，通常設定為0；screenX，事件相對於螢幕的x座標；screenY，事件相對於螢幕的y座標；clientX，事件相對於視口的X座標；clientY，事件相對於視口的Y座標；ctrlKey，表示是否按下了ctrl鍵，一般為false；shiftKey，表示是否按下了shit鍵，一般為false；metaKey，表示是否按下了meta鍵，一般為false；button，表示按下的是哪一個滑鼠鍵，預設為0；relatedTarget，表示與事件相關的對象，在類比mouseout和mouseover時使用。

　　對於需要類比滑鼠事件，一般只需要傳遞前3個參數。

　　

1 var callback =function(event){2                 console.log("1");3             }4             EventUtil.addEvent(document.getElementById("btnadd"),"click",callback);5             var evt = document.createEvent("MouseEvents");6             evt.initMouseEvent("click",false,false);7             var btn =document.getElementById("btnadd");8             btn.dispatchEvent(evt);

　　通過上面的事件，我們就能觸發btnadd元素的click事件。首先我們為元素繫結了click事件，這個事件需要使用者操作才能觸發。第5行通過createEvent建立了滑鼠事件對象，通過initMouseEvent初始化了事件對象。然後通過元素的dispatchEvent方法來觸發事件。

　　DOM2級中對鍵盤事件沒有做出規範的規定。在DOM3級中對鍵盤事件有明確的定義。調用createEvent方法，傳入KeyboardEvent能夠建立鍵盤事件。返回的事件對象包含一個initKeyEvent的方法。這個方法的參數如下：type，事件類型，如keydown；bubbles，事件是否支援冒泡，如true；cancelable，事件是否可以取消，如true；view，事件的視圖，一般為document.defaultView；key，表示按下鍵的鍵碼；location，表示按下了哪裡的鍵，0表示預設的主鍵盤，1表示左，2表示右，3表示數字鍵台，4表示行動裝置，5表示手柄；modifiers，空格分隔的修改鍵列表，如shift；repeat，按這個鍵的次數。

1 var txt=document.getElementById("inputtext");2             txt.focus();3             var evt =document.createEvent("KeyboardEvent");4             evt.initKeyboardEvent("keydown",false,false,document.defaultView,"a",0,"Shift",0);5             txt.dispatchEvent(evt);

　　上面的代碼類比了keydown事件，同步選取shift鍵和a鍵。

　　可以通過JavaScript代碼類比滑鼠事件、鍵盤事件、HTML事件和變動事件。同時也可以類比自訂事件。

　　

1 var add=document.getElementById("btnadd");2             EventUtil.addEvent(add,"myevent",function(ev){3                 ev=EventUtil.getEvent(ev);4                 var target=EventUtil.getTarget(ev);5                 console.log(ev.type);//myevent6             });7             var evt=document.createEvent("CustomEvent");8             evt.initCustomEvent("myevent",false,false,"hello");9             add.dispatchEvent(evt);

　　上面的代碼通過createEvent方法建立了CustomEvent事件對象，也就是自訂事件對象，通過initCustomEvent初始化對象，最後觸發myevent事件。第5行輸出事件的類型為myevent，正是我們自訂的事件。

　　上面的建立類比事件的方法在ie8以及ie8以下的瀏覽器中，並不支援。可以使用以下的代碼來類比事件。

1 var btn =document.getElementById("btnadd");2             EventUtil.addEvent(btn,"click",function(e){3                 console.log("click");4             })5             var evt=document.createEventObject();6             btn.fireEvent("onclick",evt);

　　最後講一下事件類比中經常用到的一情境，比如需要下載一幅圖片或者匯出excel等，可以通過事件類比來實現。

 1 function downloadImg(){ 2                 var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 3                     var img = document.createElement("img"); 4                     img.src="Font-Awesome-3.2.1/src/assets/img/fort_awesome.jpg"; 5                     img.style.display="none"; 6                     document.body.appendChild(img); 7                  if (userAgent.indexOf("MSIE") > -1) { 8                       var oPop = window.open(img.src,"","width=1, height=1, top=5000, left=5000"); 9                     for(; oPop.document.readyState != "complete"; )10                     {11                         if (oPop.document.readyState == "complete")break;12                     }13                     oPop.document.execCommand("SaveAs");14                     oPop.close();15                     16                 }17                  else{18                  19                     var evt=document.createEvent("MouseEvents");20                     evt.initMouseEvent("click",false,false);21                     var a=document.createElement("a");22                     a.download="test.jpg";23                     a.href=img.src;24                     a.dispatchEvent(evt);25                  }26             }27             downloadImg();

 

淺談JavaScript的事件（事件類比）