文章出處

javascript自定義事件

Javascript中的事件包括click、mouseover、submit、change等等，它們分別在元素被點擊、鼠標滑過、表單提交、域的內容改變時觸發，那么自定義事件是如何定義和觸發的？它有什么意義？

如何定義？

自定義事件創建分兩步：創建事件模型、初始化。

document.createEvent()用于創建事件模型，它接收一個參數，表示事件模型的類型。事件模型類型一共有4類，分別是:

UIEvents（通用的UI事件），鼠標事件鍵盤事件都繼承自UI事件

MouseEvents（通用的鼠標事件）

MutationEvents（通用的突變事件）

HTMLEvents（通用的HTML事件）

技術分享

什么叫突變事件？文檔中的某個元素被移除了，就會觸發突變事件中的DOMNodeRemovedFromDocument事件

什么叫HTML事件，就是元素上的事件。如blur、change、resize

對4種事件模型詳情感興趣可移步這里了解更多……

創建事件模型后，初始化返回的event對象。以上4種事件模型對應的初始化方法分別是initUIEvent()、initMouseEvent()、initMutationEvent()、initEvent()，它們接收3個參數：

type 事件類型，如“click”

bubble 是否冒泡

cancelable 是否可以取消事件默認行為

當然他們各自還有其它參數，這里主要介紹自定義事件，就不展開了。

如何觸發？

自定義事件初始化以后，如何觸發呢？自定義事件和瀏覽器的行為不相干，都是通過元素的dispatchEvent()方法主動觸發的，改方法接收一個參數，表示觸發的事件對象，即document.createEvent()的返回值。

源碼：

<script>  
// 創建自定義事件
var e = document.createEvent("HTMLEvents");
// 初始化wangmeijian事件
e.initEvent("wangmeijian", false, true);
// 監聽document的wangmeijian事件
document.addEventListener("wangmeijian", function(){
    alert("觸發成功！");
})
// 觸發自定義事件
document.dispatchEvent(e);  
</script>

IE8及以下瀏覽器不支持createEvent方法，但是它們有onprototypechange事件，當dom元素的屬性值發生變化時會觸發這個事件，也就是說，可以給dom元素設置一個屬性attr，監聽該元素的onprototypechange事件，判斷發生變化的屬性（event對象下的prototypeName）是不是attr，是則執行自定義事件函數。要主動觸發onprototypechange事件，只需要修改元素的attr屬性值即可。

demo（僅測試了IE11下的IE7、IE8文檔模式）

源碼：

<h1>
        請使用IE8或更低版本的瀏覽器測試
</h1>
<button id="btn" eventAttr="0">點擊修改按鈕的eventAttr屬性值</button>
<script>  
var btn = document.getElementById("btn");

btn.attachEvent("onpropertychange", function(e){
    if(e.propertyName === "eventAttr"){
        alert("觸發成功！");
    }
})
btn.attachEvent("onclick", function(){
    btn.setAttribute("eventAttr", 1);
})
</script>

有什么意義？

到這里有的同學會問了，寫這么一堆代碼，最終是為了執行這一行代碼