本篇主要介紹HTML DOM中事件的模擬操作。

其他事件文章

4. HTML 事件(四) 模擬事件操作

目錄

　　1.1 特點

　　1.2 建立方式

2. 老版本

　　2.1 建立步驟

　　2.4 自定義事件

3. 新版本

　　3.1 建立步驟

　　3.4 自定義事件 

1. 模擬事件介紹

模擬事件，即非實際操作去觸發元素的事件。如按鈕的點選，不需要實際用滑鼠去點選此按鈕，而是採用模擬觸發此按鈕的點選事件。

1.1 特點

觸發元素的事件可以直接呼叫事件方法(如：click()觸發元素的click事件)。為何還要單獨的模擬觸發呢？

與直接觸發相比，模擬事件包含以下特點：

①模擬特定場景：如觸發click事件，可同時模擬是否按下Ctrl、Alt等按鍵。

②可觸發自定義事件。

1.2 建立方式

模擬事件的建立方式有兩種：

①老版：通過document.createEvent()方法建立各事件型別物件。

②新版：通過各事件的建構函式建立事件型別物件。

注：老版本方式將會被新版本方式所替代。

2. 老版本方式

說明：通過document.createEvent()方法建立各事件型別物件。

2.1 建立步驟

②呼叫event.initEvent()方法進行事件初始化。注意：不同的事件型別物件，其初始化的方法名稱也不通；比如MouseEvent的為event.initMouseEvent()。

③呼叫元素物件的dispatchEvent(event物件)方法進行派發。

2.2 支援的事件型別

2.3 模擬滑鼠點選

說明：模擬滑鼠點選，按鈕A和B都註冊了各自的點選事件，點選按鈕A時，模擬觸發按鈕B的點選事件。

HTML：

<button id="a-btn">A按鈕</button>
<button id="b-btn">B按鈕</button>

JS：

// 按鈕A點選時，模擬觸發按鈕B的點選事件
document.getElementById('a-btn').onclick=function(e){
    var clickEvent=document.createEvent('MouseEvent'); // 1.建立一個滑鼠事件型別
    clickEvent.initMouseEvent('click',false,false,window,0,0,0,0,0,false,false,false,false,0,null); // 2.初始化一個click事件
    document.getElementById('b-btn').dispatchEvent(clickEvent); // 3.派發(觸發)
};

// 按鈕B
document.getElementById('b-btn').onclick=function(e){
    console.log('b');
};

2.4 自定義事件

說明：模擬事件支援模擬觸發自定義事件。

HTML：

<button id="a-btn">A按鈕</button>
<button id="b-btn">B按鈕</button>

JS：

// 按鈕A
document.getElementById('a-btn').onclick=function(e){
    var customEvent=document.createEvent('CustomEvent'); // 1.建立一個自定義事件型別
    customEvent.initCustomEvent('build'); // 2.初始化一個build事件
    document.getElementById('b-btn').dispatchEvent(customEvent); // 3.派發(觸發)
};

// 按鈕B註冊一個自定義事件
document.getElementById('b-btn').addEventListener('build',function(){
    console.log('b-btn build');
});

3. 新版本方式

說明：通過各事件的建構函式建立事件型別物件。

3.1 建立步驟

①通過各事件型別的建構函式建立一個event物件。

②呼叫元素物件的dispatchEvent(event物件)方法進行派發。

3.2 支援的事件型別

3.3 模擬滑鼠點選

說明：模擬滑鼠點選，按鈕A和B都註冊了各自的點選事件，點選按鈕A時，模擬觸發按鈕B的點選事件並且模擬alt按鍵按下。

HTML：

<button id="a-btn">A按鈕</button>
<button id="b-btn">B按鈕</button>

JS：

// 按鈕A點選時，模擬觸發按鈕B的點選事件
document.getElementById('a-btn').onclick=function(e){
    var clickEvent=new MouseEvent('click',{
        altKey:true // 模擬alt鍵按下
    });
    document.getElementById('b-btn').dispatchEvent(clickEvent); // 派發
};

// 按鈕B
document.getElementById('b-btn').onclick=function(e){
    console.log('按鈕b點選事件觸發；alt案件是否按下：'+e.altKey);
};

3.4 自定義事件

說明：模擬事件支援模擬觸發自定義事件。

HTML：

<button id="a-btn">A按鈕</button>
<button id="b-btn">B按鈕</button>

JS：

// 按鈕A
document.getElementById('a-btn').onclick=function(e){
    var customEvent = new CustomEvent('build');
    document.getElementById('b-btn').dispatchEvent(customEvent); // 派發
};

// 按鈕B註冊一個自定義事件
document.getElementById('b-btn').addEventListener('build',function(){
    console.log('b-btn build');
});

4. Excel匯出應用場景

在Web系統中Excel匯出是很常見的功能，比如銷售記錄匯出、採購記錄匯出、人員資訊匯出等等。

採用HTML DOM的模擬事件可以定義為一個公共函式進行統一的匯出操作，各業務模組的匯出按鈕只需呼叫即可。

4.1 公共函式

/**
* 下載Excel檔案
* @param url {URL} 請求URL
* @param params {Params} 查詢引數
* @param fileName {String} 檔名稱
*/
function downloadExcel(url, params, fileName) {
    $.ajax({
        type:'GET',
        url: url,
        data:params,
        dataType:'json',
        success: function (data, responseStatus) {
            /*
            * data{
                msg:'UpFiles/XXXX.xls' // 返回的檔案連結
              }
            */
            var downloadURL = location.origin + '/' + data.msg; // 下載連結
            // 1)建立個a標籤
            var aElement = document.createElement('a');
            aElement.href = downloadURL;
            aElement.download = fileName;
            // 2)建立點選事件
            var clickEvent=new MouseEvent('click');
            aElement.dispatchEvent(clickEvent); // 派發
        }
    });
}

4.2 示例圖