JavaScript 自定义事件
2016-04-06 22:08
706 查看
事件是一个观察者模式,即由主体(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类型的handleMessage eventTarget.addHandler("show", showMessage); // 注册show类型的showMessage eventTarget.fire({ type : "message", message : "hello"}); // 触发message类型的handleMessage, eventTarget.fire({ type : "show", message : "world"}); // 触发show类型的showMessage eventTarget.removeHandler("show", showMessage); // 解除message类型的handleMessage eventTarget.fire({ type : "message", message : "hello"}); // 触发message类型的handleMessage eventTarget.fire({ type : "show", message : "world"}); // 触发show类型的showMessage
相关文章推荐
- js EventUtil addhandler removehandler
- 【新人笔记16.04.06】JS--定义属性
- javascript双等号引起的类型转换
- 论如何让json更懂中文?
- iOS js oc相互调用(JavaScriptCore)(二)
- JavaScript实现的三个构成部分
- 写一个js向左滑动删除 交互特效的插件——Html5 touchmove
- JS中关于clientWidth offsetWidth scrollWidth 等的含义
- 登陆界面设计,如果用户名密码为空javascript提醒
- JSP小练习(一)
- 【新人笔记16.04.06】JS--加载顺序之谜
- JS使用正则+JSON对HTML模板进行数据填充
- javascript高级程序设计 读书笔记1
- javascript中的this用法
- 如何推算多少天后是星期几?
- 如何根据边长数值计算六边形的面积
- 简单的数学计算题(二)
- 摄氏温度和华氏温度的转换
- 实现一个简单的数学计算题
- 如何结合工作年限和薪资来计算年终奖。