js事件模型与自定义事件实例解析
作者:caihg 时间:2021-05-26 06:15:06
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
标签:js,事件模型,自定义事件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SpringBoot整合mybatis-plus进阶详细教程
2023-11-27 05:13:12
![](https://img.aspxhome.com/file/2023/6/61836_0s.png)
C#正则表达式匹配HTML中的图片路径,图片地址代码
2023-03-10 16:33:48
Java 使用Docker时经常遇到的五个问题
2023-12-10 07:20:21
![](https://img.aspxhome.com/file/2023/7/79317_0s.jpg)
spring中的注解事务演示和添加步骤详情
2023-03-03 08:32:48
![](https://img.aspxhome.com/file/2023/3/77983_0s.png)
spring boot 全局异常处理方法汇总
2021-07-06 22:44:04
Java7和Java8中的ConcurrentHashMap原理解析
2022-06-09 22:06:28
![](https://img.aspxhome.com/file/2023/7/66947_0s.jpg)
Android使用PowerImageView实现播放强大的ImageView动画效果
2022-06-16 19:55:54
![](https://img.aspxhome.com/file/2023/0/88720_0s.gif)
解决Java中OutOfMemoryError的问题
2023-01-26 13:51:03
![](https://img.aspxhome.com/file/2023/8/76498_0s.png)
java pdf加水印的方法
2022-09-03 06:06:50
基于Flutter实现多边形和多角星组件
2023-06-19 06:02:50
![](https://img.aspxhome.com/file/2023/7/84747_0s.png)
Java SpringCache+Redis缓存数据详解
2023-11-29 01:01:05
![](https://img.aspxhome.com/file/2023/1/60131_0s.jpg)
java判断list不为空的实现,和限制条数不要在一起写
2022-01-24 13:14:38
Spring JPA配置文件Eclipse报错如何解决
2022-05-07 00:51:34
mybatis-plus多表联查join的实现
2023-11-24 06:49:56
MyBatis中PageHelper不生效的解决方案
2022-10-23 11:46:47
SpringBoot实现接口等幂次校验的示例代码
2022-01-21 10:49:00
关于@CacheEvict无法解决分页缓存清除的解决思路
2023-07-06 20:22:44
零基础写Java知乎爬虫之先拿百度首页练练手
2022-11-14 09:07:05
![](https://img.aspxhome.com/file/2023/8/81238_0s.png)
第三方包jintellitype实现Java设置全局热键
2023-09-25 10:33:50
C#实现的海盗分金算法实例
2023-12-20 21:00:53