「关注前端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源创计划”，欢迎正在阅读的你也加入，一块儿分享。