js事件模型与自定义事件实例解析
作者:caihg 发布时间:2021-05-26 06:15:06
标签:js,事件模型,自定义事件
JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。
var eventModel = {
list: {},
bind: function () {
var args = [].slice.call(arguments),
type = args[0],
handlers = args.slice(1);
if (typeof type === 'string' && handlers.length > 0) {
for (var i = 0; i < handlers.length; i++) {
if (typeof handlers[i] === 'function') {
if (!this.list[type]) {
this.list[type] = [];
}
this.list[type].push(handlers[i]);
}
}
}
},
unbind: function () {
var type = arguments[0],
handlers = Array.prototype.slice.call(arguments, 1);
if (typeof type === 'string') {
if (handlers.length === 0) {
this.list[type] = [];
} else {
for (var i = 0; i < handlers.length; i++) {
if (typeof handlers[i] === 'function' && handlers[i] === this.list[type][i]) {
this.list[type].splice(i, 1);
}
}
}
}
},
trigger: function () {
var arguments = [].slice.call(arguments),
type = arguments[0],
args = arguments[1] instanceof Array && !arguments[2] ? arguments[1] : arguments.slice(1),
handlers = this.list[type];
for (var i = 0; i < handlers.length; i++) {
handlers[i].apply(this, args.splice(0, handlers[i].length));
}
}
};
其中主要实现了bind(绑定事件)、unbind(删除事件)与 trigger (触发事件)。对同一事件名称,可以绑定多个事件处理函数;并按照绑定的顺序依次触发。
args.splice(0, handlers[i].length) 触发时的传参
事件绑定与触发:
eventModel.bind('myevent1', function (a) {
console.log(a); // 1
}, function(b) {
console.log(b); // 2
}, function(c, d) {
console.log(c + ' + ' + d); // a + b
});
eventModel.bind('myevent1', function (e) {
console.log(e); // 50
});
eventModel.trigger('myevent1', 1,2,'a','b', 50);
事件删除:
<button id="bind">bind</button>
<button id="unbind">unbind</button>
var fnX = function () {
console.log('fnX');
}
var fnY = function () {
console.log('fnY');
}
eventModel.bind('myevent2', fnX, fnY);
document.getElementById('unbind').onclick = function () {
eventModel.unbind('myevent2', fnX); //删除 fnX 后,只剩下 fnY
};
document.getElementById('bind').onclick = function () {
eventModel.trigger('myevent2'); //输出 fnX fnY
//在点击unbind后,只输出 fnY
};
来源:http://www.cnblogs.com/caihg/p/5227139.html
0
投稿
猜你喜欢
- 面向对象的程序是由对象组成的,每个对象包含对用户公开的特定功能部分和隐藏的实现部分。在面向对象程序设计(OOP)中,不必关心对象的具体实现。
- 当你在使用Mybatis 时进行配置的时候有这样几个坑一定要注意下。mybatisplus中逻辑删除通俗说为了在数据库中保留数据,但是又不想
- 1.数据类型的分类Java的数据类型主要分为两类:基本数据类型、引用数据类型Java中的字符串String属于引用数据类型。因为String
- 在Java中创建一个线程有两种方法:继承Thread类和实现Runnable接口。下面通过两个例子来分析两者的区别:1)继承Thread类p
- 目录1. 支付宝支付接口(沙箱实现)1.1 支付宝沙箱账号获取1.2 下载客户端(目前好像只支持Android)1.3 代码配置1. 支付宝
- C#实现IDispose接口.net的GC机制有两个问题:首先GC并不能释放所有资源,它更不能释放非托管资源。其次,GC也不是实时的,所有G
- 方法一:简单的方法就是改变picturebox 控件的borderstyle样式 currentSelectPicBox.Bord
- 项目地址:gitee.com/baojh123/rp…netty-study 这个项目是没用到的,可以删掉,主要是测试
- Singleton是众多设计模式中最容易理解的一种,也是众多设计模式中较为重要的一种设计模式。接下来我们看看具体介绍。Singleton模式
- 实际项目中pom.xml依赖写法: <dependency> <groupId>org.springf
- 刚刚看MSDN的一个例子无意发现的小技巧,大家一看就明白了,不过好像蛮有用的,先记下咯,以后慢慢研究。using System;namesp
- 目录引言SqlSessionFactory不使用 XML 构建 SqlSessionFactorySqlSessionFactoryBuil
- 在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的File
- 一个专门实现访问sql server数据库增删改查的操作代码,分享给大家,具体内容如下using System;using System.C
- JavaFXJavaFX 是一个开源的下一代客户端应用平台,适用于基于Java构建的桌面、移动端和嵌入式系统。 它是许多个人和公司的共同努力
- 本文实例为大家分享了Java实现单向链表反转的具体代码,供大家参考,具体内容如下1、实现代码public class LinkedListT
- 一:SparkSQL1.SparkSQL简介Spark SQL是Spark的一个模块,用于处理结构化的数据,它提供了一个数据抽象DataFr
- 1:什么是Socket所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信
- 1.alibaba falstjson1.Map转JSONMap<String, Object> map = new HashM
- 使用的是idea+restful风格第一:引入依赖为:<!--poi--> <dependenc