Event及CustomEvent的介绍及使用

前言

单页应用中数据传递的方式有很多，有时候我们并没有用 react 或者 vue，自己封装的简单的单页应用，需要传递一些简单的数据，那么自定义事件的方式是一种。今天 haorooms 博客简单介绍一下 Event 及 CustomEvent 的介绍及使用

event 自定义事件

javascript 提供了 Event 对象，所有的事件都是这个对象的实例，或者说继承了 Event.prototype 对象。Event 对象本身就是一个构造函数，可以用来生成新的实例。

 new Event(type, options);

Event 构造函数接受两个参数。第一个参数 type 是字符串，表示事件的名称；第二个参数 options 是一个对象，表示事件对象的配置。该对象主要有下面两个属性。

bubbles：布尔值，可选，默认为 false，表示事件对象是否冒泡。

cancelable：布尔值，可选，默认为 false，表示事件是否可以被取消，即能否用 Event.preventDefault() 取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。

demo

let haoroomsEvent = new Event('haoroomsDemoEvent',{bubbles:true,cancelable:false})


setInterval(() => {document.dispatchEvent(haoroomsEvent)

}, 3000);


document.addEventListener('haoroomsDemoEvent',(e)=>{console.log('事件触发了',e)
})

我们可以在任何单页应用中，通过

 document.dispatchEvent(haoroomsEvent)

触发事件

然后通过

 document.addEventListener('haoroomsDemoEvent')

接受到事件。

事件传递数据

上面的 event 事件可以传递数据吗？

其实，要传递数据，有另外一个 CustomEvent 对象，用法和上面 event 一模一样，只是可以传递一些数据，不过 ie 浏览器不支持。

demo 如下：

let haoroomsEvent = new CustomEvent('haoroomsCustomEvent',{bubbles:true,cancelable:false,detail:{111:22,aa:22,ff:55}})


setInterval(() => {document.dispatchEvent(haoroomsEvent)

}, 3000);


document.addEventListener('haoroomsCustomEvent',(e)=>{console.log('事件出发了',e.detail)
})

我们通过 detail 传递了数据。同样，单页应用中的任何位置，都可以通过 dispatchEvent 触发事件，然后通过 addEventListener 拿到事件。

值得一提的是，document 也可以是任何 dom 对象，都可以的。

小结

上面就是简单的 Event 及 CustomEvent 的介绍及使用，欢迎关注 haorooms 前端博客，转载请注明 haorooms 前端博客。