今天，突然想起之前有一哥們在封裝框架時遇到的一個小問題，所以決定還是分享一下，這個問題還是很有意思的，就是如何觸發一個button的mouseover事件，
首先呢，我們先來回顧一下有關對象時間的觸發，瀏覽器默認封裝的事件對於一個不可輸入對象，例如div對象，它具有blur和click，也就是相當於如下：
var elementDiv = document.createElement("div");
elementDiv.blur();//相當於觸發div對象的onblur事件
elementDiv.click();//相當於觸發div對象的onclick事件這些事瀏覽器封裝好的，提供的，但是，如果是一個瀏覽器未封裝的呢，例如mouseover...
最開始考慮這個問題的時候，我是想用鉤子(Hook)做，用一個模擬鉤子去僞裝一個鼠標，去觸發事件，但是這樣的話，需要移動你的光標位置，
然後出發事件，先不說可行性，這樣的操作量對於一個框架來說是不可取的，於是問題進入卡死階段，後來，有人給出一個比較生僻的方法，
但是這個方法確實最適合的解決方案:
DOM裏，如果我們創建對象的話，需要使用的方法就是documen.createElement(DOM標籤)，那麼，我們創建對象是不是也會有類似的方法呢,
答案是肯定的，DOM提供一個方法document.createEvent(DOM事件類型)，那麼下面我們來分析一下這個方法。
DOM事件類型:
這個實在是不愛寫了，我就直接上圖了
創建事件
這個可以看出，我們可以創建3類事件，HTMLEvents/MouseEvents/UIEvents
HTMLEvents：包括 ‘abort’, ‘blur’, ‘change’, ‘error’, ‘focus’, ‘load’, ‘reset’, ‘resize’, ‘scroll’, ‘select’,‘submit’, ‘unload’. 事件
UIEevents ：包括 ‘DOMActivate’, ‘DOMFocusIn’, ‘DOMFocusOut’, ‘keydown’, ‘keypress’, ‘keyup’.間接包含 MouseEvents.
MouseEvents：包括 ‘click’, ‘mousedown’, ‘mousemove’, ‘mouseout’, ‘mouseover’, ‘mouseup’.
於是創建這三類事件的語句就是如下：
<script>
var HTMLEvent = document.createEvent("HTMLEvents");
var UIEvent = document.createEvent("UIEvents");
var MouseEvent = document.createEvent("MouseEvents");
</script>事件初始化:
然後，既然事件創建完了，就該初始化了，初始化參數我也是直接貼圖了
由此可以看出，初始化需要的參數，舉個例子來說就是
<script>
var MouseEvent = document.createEvent("MouseEvents");
MouseEvent.initMouseEvent("mouseover",false,true);
</script>第一個參數就不解釋了，就是上述提供的事件類型，
第二個參數事件起泡，說到這個就要分析DOM事件的執行階段：
1：捕獲階段，說白了就是去找事件對應的DOM節點
2：可以說是事件發生階段，就是DOM執行對應的事件
3：起泡階段：這個就是在執行完當前節點的事件後向上起泡，如果上層節點有相同的事件，則執行；具體的來說就是一個div中有個a，並且div和a對象都具有onclick事件，並且a的click事件是起泡的，那麼，當a事件的click事件觸發並且執行完之後，會執行div的click事件。
第三個參數也不解釋了，就是是否接受取消事件的默認關聯。
事件觸發響應
這個就是直接調用dispatchEvent() 事件了，我直接貼圖了
這個寫法格式就是
要觸發的對象.dispatchEvent(要觸發的事件)。
下面我上一段代碼展示所有的功能：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1265.19">
</head>
<body>
<div onclick = "testClick()" id="divA">
</div>
</body>
<script type="text/javascript">
function testClick(){
alert("click");
}
var clickEvent = document.createEvent("MouseEvents");
var clickElement = document.getElementById("divA");
clickEvent.initMouseEvent("click",false,true);
clickElement.dispatchEvent(clickEvent);
</script>
</html>
這個就是觸發div的click事件；
並且這種寫法的兼容性是槓槓的~
PS：以上截圖都是出自W3CSchool，好吧，今天就寫到這裏~
