事件經常由操作或者通過瀏覽器功能觸發，通過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);//myevent
6             });
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的事件（事件模擬）