JavaScript 自定义事件
来源:互联网 发布:qq群刷花软件 编辑:程序博客网 时间:2024/06/05 06:26
事件是一个观察者模式,即由主体(DOM元素)和观察者(事件处理代码)组成,主体可以脱离观察者单独存在,观察者知道主体并能注册事件的回调函数。
下面是自定义事件的基本模式:
function EventTarget () { this.handlers = {}; // 对象属性,有三个方法 // this.handlers = { // type1 : [type1Fun1, type1Fun2], // type2 : [type2Fun1, type2Fun2] // }}EventTarget.prototype = { constructor : EventTarget, /**绑定事件 * param type : 自定义事件类型 * param handler : 自定义事件绑定的回调函数 */ addHandler : function (type, handler) { // 如果传入的事件类型为undefined,就创建一个数组 if (typeof this.handlers[type] == "undefined") { this.handlers[type] = []; } // 再将回调函数添加到数组中去 this.handlers[type].push(handler); }, /**触发事件 * param event : 传入的对象 * { type : "show", message : "hello world"} */ fire : function (event) { // alert(event.target); // undefined // alert(this instanceof EventTarget); // true // alert(Object.prototype.toString.call(this)); // [object Object] if (!event.target) { event.target = this; } if (this.handlers[event.type] instanceof Array) { var handlers = this.handlers[event.type]; // alert(handlers); // alert(event.type); // message // alert(handlers.length); // 1 // alert(handlers[0]); for (var i = 0, len = handlers.length; i < len; i++) { handlers[i](event); // 调用对应事件的回调函数 } } else { throw new Error("No event can call"); } }, /**注销事件的回调函数 * param type : 事件类型 * param handler : 回调函数 * 调用示例:removeHanlder("show", showMessage); * 注销show类型的showMessage函数 **/ removeHandler : function (type, handler) { if (this.handlers[type] instanceof Array) { var handlers = this.handlers[type]; // 取得对应事件的回调函数 for (var i = 0, len = handlers.length; i < len; i++) { if (handlers[i] == handler) { break; // 得到对应事件的索引值 } } handlers.splice(i, 1); // 删除索引值,即删除对应的事件的其中一个回调函数 } }}function handleMessage(event){ alert("接受的信息: " + event.message);}function showMessage(event){ alert("展示的信息: " + event.message);}var eventTarget = new EventTarget();eventTarget.addHandler("message", handleMessage); // 注册message类型的handleMessageeventTarget.addHandler("show", showMessage); // 注册show类型的showMessageeventTarget.fire({ type : "message", message : "hello"}); // 触发message类型的handleMessage,eventTarget.fire({ type : "show", message : "world"}); // 触发show类型的showMessageeventTarget.removeHandler("show", showMessage); // 解除message类型的handleMessageeventTarget.fire({ type : "message", message : "hello"}); // 触发message类型的handleMessageeventTarget.fire({ type : "show", message : "world"}); // 触发show类型的showMessage
0 0
- javascript:自定义事件初探
- JAVASCRIPT 自定义onchange事件
- Javascript自定义事件
- Javascript之自定义事件
- javascript自定义事件
- JavaScript自定义事件
- javascript自定义 error事件
- javascript 自定义事件
- JavaScript 自定义事件
- Javascript 自定义事件
- JavaScript自定义事件
- javascript实现自定义事件
- javascript事件,自定义事件,基于自定义事件的解耦
- javascript自定义事件应用实例
- JavaScript之自定义对象、事件
- 12JavaScript自定义对象、事件
- 浅谈JavaScript模拟事件和自定义事件
- JavaScript自定义事件及dom无关事件
- 2016年微软在线笔试题之Font Size
- 这些年看过的那些开源项目
- HDU Eddy's 洗牌问题 (模拟)
- Java Virtual Machine Specification
- 解决pow占用80端口的问题
- JavaScript 自定义事件
- 关于RuntimeException类的特点和小示例
- Exchange 2003 迁移到 Exchange 2010
- 安卓6.0.x 获取root权限
- C#当窗体大小改变时,窗体中的控件大小也随之改变
- Linux 学习中遇到的小问题
- Android Studio快捷键20160406
- Qt在windows与Mac OS中获取执行程序版本号
- C# Winform中无焦点状态下获取键盘输入或者USB扫描枪数据