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

二、不使用标签

  1. class EventEmitter {
  2. events = {}
  3. emit(key, ...data) {
  4. if (this.events[key]) {
  5. this.events[key].forEach(it => it(...data))
  6. }
  7. }
  8.  
  9. on(key, fn) {
  10. if (!this.events[key]) {
  11. this.events[key] = []
  12. }
  13. this.events[key].push(fn)
  14. }
  15.  
  16. off(key, fn) {
  17. if (!this.events[key]) {
  18. return false
  19. }
  20. if (!fn) {
  21. return (this.events[key] = null)
  22. }
   this.events[key] = this.events[key].filter(it => it !== fn)
  1. }
  2. }

自定义事件 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. EINTR与ERESTARTSYS

    驱动中如果down_interruptible之类的函数被信号中断,驱动可以返回-EINTR或-ERESTARTSYS. 区别在于: 若返回-EINTR,应用程序执行的系统调用会返回表示错误的值,且e ...

  2. BASIC-19_蓝桥杯_完美的代价

    思路(贪心): 1.两边往中间逼近,步数少; 2.单个字符出现时只考虑移动到中间的步数,不做移动,因为这是最后进行,不影响结果; 示例代码: #include <stdio.h>#defi ...

  3. Rabbit测试及其方案

    转载:https://www.2cto.com/kf/201609/548190.html 个消息没有回应,则MQ不会再往消费者A中发消息,直到收到消息确认后才会再次发送. Ack:消息确认. :启动 ...

  4. Linux版本使用的文件系统类型

    1. cat /etc/fstab 2. df -T -h

  5. Fix-Dell iDRAC 7 error: RAC0218: The maximum number of user sessions is reached

    Hi Everyone, We came across the following error while performing some preventative maintenance check ...

  6. 一份CTR的特征工程图

  7. png,jpg,gif这些图片格式解释一下,分别什么时候用,webp呢

    gif图形交换格式,索引颜色格式,颜色少的情况下,产生的文件极小,支持背景透明,动画,图形渐进,无损压缩(适合线条,图标等),缺点只有256种颜色 jpg支持上百万种颜色,有损压缩,压缩比可达180: ...

  8. kubernetes学习 做持久化存储

    本节演示如何为 MySQL 数据库提供持久化存储,步骤: 1.创建 PV 和 PVC 2.部署 MySQL 3.向 MySQL 添加数据 4.模拟节点宕机故障,Kubernetes 将 MySQL 自 ...

  9. Python日志配置类

    # -*- coding: utf-8 -* """日志工具类 author: Jill usage: from common.logger import Log log ...

  10. uva-11205-枚举子集

    题意: 至少用多少列来表示输入中的二进制数,并且表示的数里面没有重复,最多P列,N个二进制数 所以......表示的最大二进制数是2^P,那么在2^P方内的数二进制最大值是P个1,最小是0,所以,枚举 ...