在有些情況下，我們需要程序邏輯自動觸發元素的事件，例如js提供了click()， form提供了reset(),submit()等方法！在jquery中提供了trigger()方法幫助我們自動觸發事件，原理是什么呢？接下來讓我們一探究竟！

一、eventType

eventType共有5種類型：

HTMLEvents：包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 'submit', 'unload'.

UIEevents ：包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.

MouseEvents：包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.

MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved','DOMCharacterDataModified','DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.

上述加粗的是經常會用到的事件類型

二、createEvent(eventType)

以eventType=MouseEvents，觸發事件為click為例：

document.body.οnclick=function(){

alert("hello")

}

var event = document.createEvent('MouseEvents');

// initEvent接受3個參數：

// 事件類型，是否冒泡，是否阻止瀏覽器的默認行為

event.initEvent("click", false, true);

//觸發document上綁定的click事件

document.body.dispatchEvent(event);

通過el.dispatchEvent觸發事件，聰明的你有沒有想到vue里的$emit?

三、自定義事件

document.body.addEventListener("veb",function(e){

alert(e.eventType)

})

var event = document.createEvent('HTMLEvents');

// initEvent接受3個參數：

// 事件類型，是否冒泡，是否阻止瀏覽器的默認行為

event.initEvent("veb", false, true);

//通過eventType傳遞事件信息

event.eventType="I love Veblen"

//觸發document上綁定的click事件

document.body.dispatchEvent(event);

如果沒什么意外，上面代碼執行，你會向Veblen表白!