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


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

其他事件文章

1. HTML 事件(一) 事件的介紹

2. HTML 事件(二) 事件的注冊與注銷

3. HTML 事件(三) 事件流與事件委托

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

 

目錄

1. 模擬事件介紹 

  1.1 特點

  1.2 創建方式

2. 老版本

  2.1 創建步驟

  2.2 支持的事件類型

  2.3 模擬鼠標點擊

  2.4 自定義事件

3. 新版本

  3.1 創建步驟

  3.2 支持的事件類型

  3.3 模擬鼠標點擊

  3.4 自定義事件 

4. Excel導出應用場景

 

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 支持的事件類型

事件類型名稱 傳遞document.createEvent()的值 初始化方法
UIEvent Types :用戶界面事件類型 UIEvents、UIEvent event.initUIEvent
MouseEvent Types :鼠標事件類型 MouseEvent、MouseEvents event.initMouseEvent
KeyboardEvent Types :鍵盤事件類型 KeyboardEvent event.initKeyEvent(Gecko內核瀏覽器才支持)、event.initKeyboardEvent
CustomEvent Types :自定義事件類型 CustomEvent event.initCustomEvent
BasicEvent Types :基本事件類型 Event、Events event.initEvent

 

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 支持的事件類型

事件名稱 構造函數 詳情地址
UIEvent Types :用戶界面事件類型 new UIEvent(typeArg [, eventInit]) https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/UIEvent
MouseEvent Types :鼠標事件類型 new MouseEvent(typeArg [, eventInit]) https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent
KeyboardEvent Types :鍵盤事件類型 new KeyboardEvent(typeArg [, eventInit]) https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent
CustomEvent Types :自定義事件類型 new CustomEvent(typeArg [, eventInit]) https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
BasicEvent Types :基本事件類型 new Event(typeArg [, eventInit]) https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

 

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 示例圖

 

==================================系列文章==========================================

本篇文章:5.6 HTML 事件(四) 模擬事件操作

Web開發之路系列文章

 

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com