自定义事件 js
// 原理如下
// 创建 类型为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)
}
}
}
自定义事件 js的更多相关文章
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- 谈谈JS的观察者模式(自定义事件)
呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...
- js自定义事件
自定义事件的本质,创建一个对象,然后把事件的名字作为对象的一个属性,然后value是一个[],把此事件的所以回调都push进去. 写一个很基本的,没有把对象暴露出去的js的自定义事件. var eve ...
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- js的自定义事件
js中的事件是js的一大技术点,说白了就是操作dom树的唯一途径. 关于事件无非两种绑定方式: document.getElementById('xxx').onclick = function(){ ...
- 漫谈js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- js 自定义事件 包含 添加、激活、销毁
1.思路 (1)构思 var eventTarget = { addEvent: function(){ //添加事件 }, fireEvent: function(){ //触发事件 }, remo ...
- 使用 JS 关闭警告框及监听自定义事件(amaze ui)
使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...
- Vue.js 源码分析(十四) 基础篇 组件 自定义事件详解
我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现 组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事 ...
随机推荐
- neo4j图数据库入门
一.安装及启动 1.安装 Java SDK 1) 地址:http://www.oracle.com/technetwork/java/javase/downloads 2) 下载:jd ...
- Javascript中的闭包(六)
一.什么是闭包 函数可以记住并访问所在词法作用域时,就产生了闭包,即使在词法作用域外调用函数. (也就是说如果一个函数在执行完之后,其中的内部包含的函数仍然对该函数的作用域持有着引用(函数执行完 ...
- Spring IOC - 控制反转(依赖注入) - 创建对象的方式
a.通过类的无参构造方法创建对象 在入门案例中就是这种方式.当用最普通的方式配饰一个<bean>时,默认就是采用类的 无参构造创建对象.在Spring容器初始化时,通过<bean&g ...
- 常用的sql语句(存储过程语法)
1.存储过程语法 ①package create or replace package PKG_RPT_WAREHOUSE is -- Author : -- Created : 2018/9/28 ...
- [转]ASP.net Application 生命周期事件
生命周期事件和 Global.asax 文件 在应用程序的生命周期期间,应用程序会引发可处理的事件并调用可重写的特定方法.若要处理应用程序事件或方法,可以在应用程序根目录中创建一个名为 Global. ...
- 1044 Shopping in Mars (25 分)
1044 Shopping in Mars (25 分) Shopping in Mars is quite a different experience. The Mars people pay b ...
- php中的释放语句unset和释放函数mysql_free_result()
首先要强调的一点是unset在php中已经不再是一个函数了,既然不是函数,那么就没有了返回值,所以用的时候不能够用unset的返回值来做判断. 其次,在函数中,unset只能销毁局部变量,并不能销毁全 ...
- ajax 方法的使用以及方法中各参数的含义
由于近来经常在项目中使用 ajax 这个函数,在工作之余自己查找了相关的资料,并总结了 ajax 方法的使用,以及方法中各个参数的含义,供大家学习参考使用 type: 要求为String类型的参数,请 ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165233
Exp0 Kali安装 安装过程 1.首先我的Mac上已经安装好了VMware Fusion,所以直接下载对应的虚拟机版本的Kali即可. 2.进入Kali官网进行下载. 以下为下载链接: Kali ...
- c#面向对象基础3
静态与非静态的区别 (1)在非静态类中既可以有实例成员,也可以有静态成员(static修饰). (2)在调用静态成员的时候要使用:对象名.实例成员. (3)在调用静态成员的时候要使用:类名.静态成员. ...