JavaScript自定义事件

简介: 标题JavaScript自定义事件最近遇到一个基于jQuery项目,项目中的功能节点页面都是通过iframe实现,但是各个iframe之间有时需要相互通信,互相相应一些事件,为了更愉快的编码所以想到了自定义事件,还别说用起来竟然有点像vue的组件通信top.

标题JavaScript自定义事件

最近遇到一个基于jQuery项目,项目中的功能节点页面都是通过iframe实现,但是各个iframe之间有时需要相互通信,互相相应一些事件,为了更愉快的编码所以想到了自定义事件,还别说用起来竟然有点像vue的组件通信


top.events = {
    on: function (name, func) {
      if(!this.handles){
        this.handles = {};
      }
      if(!this.handles[name]){
        this.handles[name] = '';
      }
      else this.handles[name] = func;
    },
    emit: function (name) {
      if(this.handles[name]){
        //arguments是伪数组所以通过call来使用slice
        this.handles[name].apply(null, Array.prototype.slice.call(arguments, 1));
      }
    },
    destory: function (name) {
      if(this.handles && this.handles[name]) delete this.handles[name];
    }
  };

//绑定
top.events.on('test', function() {});

//触发
top.events.emit('test', param));

//销毁
top.events.destory('test');

来源:https://segmentfault.com/a/1190000017497498

相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
5月前
|
JavaScript 前端开发
js事件队列
js事件队列
146 55
|
3月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
45 3
|
4月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
40 2
|
5月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
50 0
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
52 5
|
3月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
57 6
|
3月前
|
JavaScript 前端开发
JavaScript 中的自定义事件
【10月更文挑战第1天】
44 1
|
4月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
28 5
|
4月前
|
监控 JavaScript 前端开发