HTML 事件(四) 模擬事件操做

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

其餘事件文章

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

目錄

2.3

3.3

1.模擬事件介紹

模擬事件，即非實際操做去觸發元素的事件。如按鈕的點擊，不須要實際用鼠標去點擊此按鈕，而是採用模擬觸發此按鈕的點擊事件。

1.1 特色

觸發元素的事件能夠直接調用事件方法(如：click觸發元素的click事件)。爲什麼還要單獨的模擬觸發呢？

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

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

②可觸發自定義事件。

1.2 建立方式

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

①老版：經過document.createEvent()方法建立各事件類型對象。

②新版：經過各事件的構造函數建立事件類型對象。

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

2. 老版本方式

說明：經過document.createEvent方法建立各事件類型對象。

2.1 建立步驟

①經過document.createEvent(eventType)方法建立一個event對象。

②調用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 自定義事件

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

// 按鈕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按鍵按下。

// 按鈕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 自定義事件

// 按鈕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 示例圖

在Jquery中有個trigger方法能夠直接觸發，如

$('.JQ-confirm-close').trigger('click');