原生js实现自定义事件
来源:互联网 发布:淘宝优惠券平台排名 编辑:程序博客网 时间:2024/05/18 12:37
原生js实现自定义事件
用JavaScript的话来说,观察者模式的实质就是你可以对程序中某个对象的状态进行观察,并且在其发生改变时能够得到通知。
利用观察者模式可以很容易的实现自定义事件,具体代码如下:
var Event=function() { this.subscibers={};//保存事件的回调函数 };Event.prototype={ constructor:Event,//保持原型链的完整 on:function(type,callback) { //绑定事件 this.subscibers[type]=[]; this.subscibers[type].push(callback); } else { this.subscibers[type].push(callback); } }, off:function(type) { //移除事件 this.subscibers[type]=[]; }, emit:function(type) { //触发事件 var t=this; if(typeof this.subscibers[type]=='object') { this.subscibers[type].forEach(function(fn,i) { fn.call(t); }); } }};var s=new Event();s.title='测试自定义事件';s.on('change.title',function() { console.log(this.title);});s.setTitle=function(value) { this.title=value; this.emit('change.title')};s.setTitle('属性发生了变化');
使用自定义事件,可以很容易实现面向对象的编程方式,并且在对象的状态发生改变时,重新进行模板的渲染。
阅读全文
0 0
- 原生js实现自定义事件
- JS自定义事件原生
- js原生实现FastClick事件
- js实现自定义事件
- 原生js实现下拉到底事件
- jQueryy原生js实现---hover事件
- JS原生实现自定义滚动条
- 原生HTML5自定义事件
- 原生js--事件类型
- js原生事件封装
- 原生js--事件类型
- 原生JS事件详解
- 原生js onclick事件
- js原生事件委托
- 原生js 实现document ready事件,出自犀牛书
- 原生JS实现跨浏览器的事件处理程序
- 原生JS实现AJAX、JSONP及DOM加载完成事件
- 原生JS实现AJAX、JSONP及DOM加载完成事件
- 如何将BroadcastReceiver中的数据传递给activity?
- Spring简介
- HDU2222_Keywords Search _AC自动机模板题
- Android 实现自定义闹钟
- 系统时钟SYSCLK、HSE、HSI的讲解之《晶振与震荡电路的介绍》
- 原生js实现自定义事件
- 排序算法总结
- Timeline时间轴
- 104. Maximum Depth of Binary Tree
- 游戏开发中的人工智能(十):模糊逻辑
- 图像特征提取优秀的文章帖子
- 留校第一周
- 423D
- Ubuntu 下搭建 Nginx + PHP 运行