// 原理如下
// 创建 类型为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. 【Servlet和JSP-学习-1】基础知识

    Servlet Session管理 Cookie 获取指定名称的Cookie 删除指定名称的Cookie JSP EL表达式 示例: 后台存入request中的属性值: JSP界面 JSTL 来自为知 ...

  2. class^=是什么意思啊,在css中 5

    这是css属性选择器的一种:[attribute^=value] ,用来匹配属性值以指定值开头的每个元素.例如: [class^="test"] { background:#fff ...

  3. ASP.NET Web Pages:全局页面

    ylbtech-.Net-ASP.NET Web Pages:全局页面 1.返回顶部 1. ASP.NET Web Pages - 全局页面 本章介绍全局页面 AppStart 和 PageStart ...

  4. GC 提前晋升

    如果Survivor 空间不足, 那么从 Eden 存活下来的和原来在 Survivor 空间中不够老的对象占满 Survivor 后, 就会提升到老年代, 可以看到这一轮 Minor GC 后老年代 ...

  5. [UE4]事件处理(Handling Events)和委托(Delegate)代码示例(一)

    1. 通过重写虚函数来处理事件 MyTriggerVolume.h 自定义一个Actor类,添加一个 Box 组件作为触发区域,然后通过重写虚函数——NotifyActorBeginOverlap, ...

  6. 2018ICPC网络赛(徐州站)A题题解

    一.题目链接 https://nanti.jisuanke.com/t/31453 二.题意 给定$N$个位置,$2^k$种颜色,让你去涂色,条件是相邻的两种颜色类型异或值的二进制表示不全为$1$(以 ...

  7. android官方文档翻译(不断更新中。。。)

    最近在自学android,抽空把官方文档的guide跟training差不多看了一遍,又对比了一些书籍,感觉还是官方文档讲得比较好,所以自己计划把官方文档翻译一下,方便自己的知识巩固以及复习查找,由于 ...

  8. android 系统架构简介

    Android系统采取的是分层的架构,根据官方文档提供的架构图,我们将android的系统架构分成5层,如图: 1.Application Framework (应用框架) application f ...

  9. MongoDB集群与LBS应用系列(二)--与Hadoop集成

    长期以来,我每开个系列,只有兴趣写一篇,很难持之与恒.为了克服这个长久以来的性格弱点,以及梳理工作半年的积累.最近一个月会写两篇关于Mongo在地理大数据方面的实践和应用,一篇关于推荐系统的初期准备过 ...

  10. 包与常用模块:time,sys。

    一  包的初识: 首先包在pycharm中的表现形式为packa文件夹:在python3种那么我们创建一个packa时会发现下边会自动跟一个—init—.py文件 包的定义:包就是一个包含有——ini ...