1、什么是dispatchEvent？
dispatch意為“調度”、“派遣”，event為“事件”。所以dispatchEvent即向指定事件目標派發一個事件，並以合適的順序觸發受影響的事件目標。
簡單來說就是，一般的事件觸發都是用戶進行某些操作時才會觸發，而使用dispatchEvent就可以在代碼中手動觸發事件了。
下面是一個簡單的創建並派發事件的例子：
var event = new Event('click');//創建一個click事件
elem.addEventListener('click', function(e){}, false);//為元素綁定事件監聽
elem.dispatchEvent(event);//派發事件
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<button id="click">Click me!</button>
</body>
<script type="text/javascript">
window.onload = function(){
var btn = document.querySelector('#click');
btn.addEventListener('click', function(e){
alert('okk!');
}, false);
var event = new Event('click');
btn.dispatchEvent(event);
}
</script>
</html>
2、運用場景
-
使用場景
- 一是觸發自定義事件，瀏覽器自帶事件一般由瀏覽器接收某些操作之后觸發，而自定義事件的觸發就需要使用
dispatchEvent來進行手動觸發了。 - 二是觸發瀏覽器標准事件。根據需求決定，某些操作如果正好與某個元素事件的觸發一致，且該事件很好模擬，我們就可以觸發該事件來達到某些我們需要的執行結果。
- 一是觸發自定義事件，瀏覽器自帶事件一般由瀏覽器接收某些操作之后觸發，而自定義事件的觸發就需要使用
-
注意事項
- ie9以下的版本不支持該方法，二是使用
fireEvent方法，所以，有需求的話需要做好瀏覽器兼容。
- ie9以下的版本不支持該方法，二是使用
-
使用Jquery來兼容瀏覽器
Jquery中的
trigger方法就是用來觸發事件的。$(selector).trigger(event,[param1,param2,...])//規定指定元素要觸發的事件，字符串
$(selector).trigger(eventObj)//eventObj派發的事件對象
3、總結
事件除了瀏覽器自動監，我們還可以手動觸發事件，也就是使用dispatchEvent。
但是我們定義事件的目的就是為了執行某一方法，所以我們手動觸發事件的目的其實也是想要執行該事件下影響到的方法。有時候不只是一個方法，且執行順序也有所區別，這個時候調用方法不如直接觸發事件方便，但是方便的同時也會有某些我們不希望觸發函數的隱患。