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
原创粉丝点击