// 原理如下
// 创建 类型为HTMLEvents的事件
var evt = document.createEvent("HTMLEvents");
// 初始化 自定义eee 事件
evt.initEvent("eee", false, false);
// 事件绑定
document.addEventListener("eee", function(e) {
console.log(e)
}) // document标签触发事件(直接运行代码触发)
document.dispatchEvent(evt);

二、不使用标签

class EventEmitter {
events = {}
emit(key, ...data) {
if (this.events[key]) {
this.events[key].forEach(it => it(...data))
}
} on(key, fn) {
if (!this.events[key]) {
this.events[key] = []
}
this.events[key].push(fn)
} off(key, fn) {
if (!this.events[key]) {
return false
}
if (!fn) {
return (this.events[key] = null)
}
   this.events[key] = this.events[key].filter(it => it !== fn)
  }
}

自定义事件 js的更多相关文章

  1. jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间

    http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...

  2. 谈谈JS的观察者模式(自定义事件)

    呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...

  3. js自定义事件

    自定义事件的本质,创建一个对象,然后把事件的名字作为对象的一个属性,然后value是一个[],把此事件的所以回调都push进去. 写一个很基本的,没有把对象暴露出去的js的自定义事件. var eve ...

  4. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  5. js的自定义事件

    js中的事件是js的一大技术点,说白了就是操作dom树的唯一途径. 关于事件无非两种绑定方式: document.getElementById('xxx').onclick = function(){ ...

  6. 漫谈js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  7. js 自定义事件 包含 添加、激活、销毁

    1.思路 (1)构思 var eventTarget = { addEvent: function(){ //添加事件 }, fireEvent: function(){ //触发事件 }, remo ...

  8. 使用 JS 关闭警告框及监听自定义事件(amaze ui)

    使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...

  9. Vue.js 源码分析(十四) 基础篇 组件 自定义事件详解

    我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现 组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事 ...

随机推荐

  1. BASIC-18_蓝桥杯_矩形面积交

    解题思路: 1.先将可能的情况列出,根据分类确定计算的方式; 示例代码: #include <stdio.h>#define N 8 int main(void){ int i = 0 , ...

  2. ICE简介及C++程序例子(转)

    一.ICE简介: 1.ICE是什么? ICE是ZEROC的开源通信协议产品,它的全称是:The Internet Communications Engine,翻译为中文是互联网通信引擎,是一个面向对象 ...

  3. springMVC学习(3)-springMVC和mybatis整合

    一.需求:使用springmvc和mybatis完成商品列表查询. 二.整合思路:springMVC+mybaits的系统架构: 1步):整合dao层 mybatis和spring整合,通过sprin ...

  4. 杂项:mPaaS

    ylbtech-杂项:mPaaS 1. 概述返回顶部 mPaaS 是源于支付宝 App 的移动开发平台,为移动开发.测试.运营及运维提供云到端的一站式解决方案,能有效降低技术门槛.减少研发成本.提升开 ...

  5. 阿里云内网和公网NTP服务器和其他互联网基础服务时间同步服务器

    阿里云为云服务器ECS提供了内网NTP服务器,对于阿里云以外的设备,阿里云同时提供了 公网NTP服务器,供互联网上的设备使用. 内网和公网NTP服务器 以下为阿里云提供的内网和公网NTP服务器列表. ...

  6. Dubbo各种协议

    协议参考手册 (+) (#) 推荐使用Dubbo协议 性能测试报告各协议的性能情况,请参见:性能测试报告 (+) dubbo:// (+) (#) Dubbo缺省协议采用单一长连接和NIO异步通讯,适 ...

  7. python程序里加入调试断点

    在需要打断的地方加入:import pdb;pdb.set_trace()即可 如:

  8. 哈希与位图(Hash and BitMap)

    Hash:哈希机制 BitMap:位图机制 目的:都是为了保证检索方便而设置的数据结构 对于大数据进行排序,由于内存限制,不可能在内存中进行,所以采取BitMap机制 为了在大数据中快速检索以及操作数 ...

  9. Select算法(最坏复杂度O(n))

    #include<iostream> #include <stdio.h> #include <stdlib.h> #include <algorithm&g ...

  10. Jenkins配置HTML报告(Windows环境)

    1.首先安装插件HTML Publisher,点击直接安装 2.在任务中配置,构建后操作,添加Publish HTML reports 3.添加完成后,新增一项 4.HTML directory to ...