公告:携程集团2022年春季校园招聘会内推!!

Event及CustomEvent的介绍及使用

2043次浏览

前言

单页应用中数据传递的方式有很多,有时候我们并没有用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前端博客。

相关文章: