// 原理如下
// 创建 类型为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. neo4j图数据库入门

    一.安装及启动 1.安装 Java SDK 1)     地址:http://www.oracle.com/technetwork/java/javase/downloads 2)     下载:jd ...

  2. Javascript中的闭包(六)

      一.什么是闭包  函数可以记住并访问所在词法作用域时,就产生了闭包,即使在词法作用域外调用函数. (也就是说如果一个函数在执行完之后,其中的内部包含的函数仍然对该函数的作用域持有着引用(函数执行完 ...

  3. Spring IOC - 控制反转(依赖注入) - 创建对象的方式

    a.通过类的无参构造方法创建对象 在入门案例中就是这种方式.当用最普通的方式配饰一个<bean>时,默认就是采用类的 无参构造创建对象.在Spring容器初始化时,通过<bean&g ...

  4. 常用的sql语句(存储过程语法)

    1.存储过程语法 ①package create or replace package PKG_RPT_WAREHOUSE is -- Author : -- Created : 2018/9/28 ...

  5. [转]ASP.net Application 生命周期事件

    生命周期事件和 Global.asax 文件 在应用程序的生命周期期间,应用程序会引发可处理的事件并调用可重写的特定方法.若要处理应用程序事件或方法,可以在应用程序根目录中创建一个名为 Global. ...

  6. 1044 Shopping in Mars (25 分)

    1044 Shopping in Mars (25 分) Shopping in Mars is quite a different experience. The Mars people pay b ...

  7. php中的释放语句unset和释放函数mysql_free_result()

    首先要强调的一点是unset在php中已经不再是一个函数了,既然不是函数,那么就没有了返回值,所以用的时候不能够用unset的返回值来做判断. 其次,在函数中,unset只能销毁局部变量,并不能销毁全 ...

  8. ajax 方法的使用以及方法中各参数的含义

    由于近来经常在项目中使用 ajax 这个函数,在工作之余自己查找了相关的资料,并总结了 ajax 方法的使用,以及方法中各个参数的含义,供大家学习参考使用 type: 要求为String类型的参数,请 ...

  9. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165233

    Exp0 Kali安装 安装过程 1.首先我的Mac上已经安装好了VMware Fusion,所以直接下载对应的虚拟机版本的Kali即可. 2.进入Kali官网进行下载. 以下为下载链接: Kali ...

  10. c#面向对象基础3

    静态与非静态的区别 (1)在非静态类中既可以有实例成员,也可以有静态成员(static修饰). (2)在调用静态成员的时候要使用:对象名.实例成员. (3)在调用静态成员的时候要使用:类名.静态成员. ...