「關注前端infoQ加星標不迷路」
javascript
在react事件機制中，最後就是經過建立 fakeNode 來觸發自定義事件，進而來進行調度工做的。前端
本文將演示如何建立和派發 DOM 事件，這些事件一般稱爲合成事件，而不是瀏覽器自己觸發的事件。java
建立自定義事件 – Event()react
使用 Event 構造函數建立以下：web
瀏覽器
微信
app
函數
flex
//建立事件var event = new Event('build');// 監聽事件elem.addEventListener('build', function (e) { ... }, false);// 觸發/派發事件elem.dispatchEvent(event);
絕大多數現代瀏覽器中都會支持這個構造函數（IE例外）。要了解更爲複雜的方法，可參考下面的早期方法 document.createEvent。
添加自定義數據 – CustomEvent()
要向事件對象添加更多數據，能夠使用 CustomEvent，detail 屬性可用於傳遞自定義數據。
使用CustomEvent 能夠建立以下：
//建立事件var event = new CustomEvent('build', { 'detail': elem.dataset.time });// 監聽事件elem.addEventListener('build', function (e) { console.log(e.detail);}, false);// 觸發/派發事件elem.dispatchEvent(event);
早期方法 – document.createEvent
早期建立事件的方法受 Java API的啓發。下面展現了一個示例：
// 建立事件var event = document.createEvent('Event');// 初始化自定義事件buildevent.initEvent('build', true, true);// 監聽事件document.addEventListener('build', function (e) { // do something}, false);// 觸發對象能夠是任何元素或其餘事件目標document.dispatchEvent(event);
事件冒泡
一般須要從子元素觸發事件，並讓祖先捕獲它：
HTML<form> <textarea></textarea></form>JSconst form = document.querySelector('form');const textarea = document.querySelector('textarea');// 建立一個自定義事件，容許冒泡，能夠經過 detail 屬性去傳遞數據const eventAwesome = new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value }});
form.addEventListener('awesome', e => console.log(e.detail.text()));//textarea 元素監聽input事件，當文本域的內容發生變化時去觸發自定義事件而且會向上冒泡textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
動態建立和派發事件
元素能夠監聽還沒有建立的事件：
HTML<form> <textarea></textarea></form>JSconst form = document.querySelector('form');const textarea = document.querySelector('textarea');form.addEventListener('awesome', e => console.log(e.detail.text()));textarea.addEventListener('input', function() { //文本的內容發生改變時，會動態建立自定義事件並進行派發 this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))});
本文分享自微信公衆號 - 像素搖擺（pxDance）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。