快捷導(dǎo)航

JS中自定義事件的使用與觸發(fā)操作實(shí)例分析

更新時(shí)間：2019年11月01日 11:54:18 作者：蒼青浪

這篇文章主要介紹了JS中自定義事件的使用與觸發(fā)操作,結(jié)合實(shí)例形式分析了JavaScript自定義事件的創(chuàng)建、監(jiān)聽(tīng)、觸發(fā)相關(guān)原理與使用技巧,需要的朋友可以參考下

1. 事件的創(chuàng)建

JS中，最簡(jiǎn)單的創(chuàng)建事件方法，是使用Event構(gòu)造器：

var myEvent = new Event('event_name');

但是為了能夠傳遞數(shù)據(jù)，就需要使用 CustomEvent 構(gòu)造器：

var myEvent = new CustomEvent('event_name', {
 detail:{
  // 將需要傳遞的數(shù)據(jù)寫在detail中，以便在EventListener中獲取
  // 數(shù)據(jù)將會(huì)在event.detail中得到
 },
});

2. 事件的監(jiān)聽(tīng)

JS的EventListener是根據(jù)事件的名稱來(lái)進(jìn)行監(jiān)聽(tīng)的，比如我們?cè)谏衔闹幸呀?jīng)創(chuàng)建了一個(gè)名稱為‘event_name' 的事件，那么當(dāng)某個(gè)元素需要監(jiān)聽(tīng)它的時(shí)候，就需要?jiǎng)?chuàng)建相應(yīng)的監(jiān)聽(tīng)器：

//假設(shè)listener注冊(cè)在window對(duì)象上
window.addEventListener('event_name', function(event){
 // 如果是CustomEvent，傳入的數(shù)據(jù)在event.detail中
 console.log('得到數(shù)據(jù)為：', event.detail);

 // ...后續(xù)相關(guān)操作
});

至此，window對(duì)象上就有了對(duì)‘event_name' 這個(gè)事件的監(jiān)聽(tīng)器，當(dāng)window上觸發(fā)這個(gè)事件的時(shí)候，相關(guān)的callback就會(huì)執(zhí)行。

3. 事件的觸發(fā)

對(duì)于一些內(nèi)置（built-in）的事件，通常都是有一些操作去做觸發(fā)，比如鼠標(biāo)單擊對(duì)應(yīng)MouseEvent的click事件，利用鼠標(biāo)（ctrl+滾輪上下）去放大縮小頁(yè)面對(duì)應(yīng)WheelEvent的resize事件。
然而，自定義的事件由于不是JS內(nèi)置的事件，所以我們需要在JS代碼中去顯式地觸發(fā)它。方法是使用 dispatchEvent 去觸發(fā)（IE8低版本兼容，使用fireEvent）：

// 首先需要提前定義好事件，并且注冊(cè)相關(guān)的EventListener
var myEvent = new CustomEvent('event_name', { 
 detail: { title: 'This is title!'},
});
window.addEventListener('event_name', function(event){
 console.log('得到標(biāo)題為：', event.detail.title);
});
// 隨后在對(duì)應(yīng)的元素上觸發(fā)該事件
if(window.dispatchEvent) { 
 window.dispatchEvent(myEvent);
} else {
 window.fireEvent(myEvent);
}
// 根據(jù)listener中的callback函數(shù)定義，應(yīng)當(dāng)會(huì)在console中輸出 "得到標(biāo)題為： This is title!"

需要特別注意的是，當(dāng)一個(gè)事件觸發(fā)的時(shí)候，如果相應(yīng)的element及其上級(jí)元素沒(méi)有對(duì)應(yīng)的EventListener，就不會(huì)有任何回調(diào)操作。

對(duì)于子元素的監(jiān)聽(tīng)，可以對(duì)父元素添加事件托管，讓事件在事件冒泡階段被監(jiān)聽(tīng)器捕獲并執(zhí)行。這時(shí)候，使用event.target就可以獲取到具體觸發(fā)事件的元素。

PS：這里再為大家附上javascript系統(tǒng)自帶事件參考表供大家參考查詢：

javascript事件與功能說(shuō)明大全：
http://tools.jb51.net/table/javascript_event

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: