js轮子—一个通用版事件监听

来源:互联网 发布:放射性元素 知乎 编辑:程序博客网 时间:2024/04/29 09:34

前几天在我的主页上写了个javascript 发布订阅设计模式,模拟了事件消息机制,并加了一个基于浏览器事件处理接口的自定义事件处理方法,有兴趣可以看看。

今天来看一个通用事件处理函数(主要是做兼容性处理),这个有几个写的比较有意思:
1. getEvent用了个while,防止找不到e||window.event,模拟冒泡找触发的事件。
2. readyEvent 做了一个小动作防止覆盖别的onload处理,赞

// event(事件)工具集,来源:github.com/markyunmarkyun.Event = {    // 页面加载完成后    readyEvent : function(fn) {        if (fn==null) {            fn=document;        }        var oldonload = window.onload;        if (typeof window.onload != 'function') {            window.onload = fn;        } else {            window.onload = function() {                oldonload();                fn();            };        }    },    // 视能力分别使用dom0||dom2||IE方式 来绑定事件    // 参数: 操作的元素,事件名称 ,事件处理程序    addEvent : function(element, type, handler) {        if (element.addEventListener) {            //事件类型、需要执行的函数、是否捕捉            element.addEventListener(type, handler, false);        } else if (element.attachEvent) {            element.attachEvent('on' + type, function() {                handler.call(element);            });        } else {            element['on' + type] = handler;        }    },    // 移除事件    removeEvent : function(element, type, handler) {        if (element.removeEnentListener) {            element.removeEnentListener(type, handler, false);        } else if (element.detachEvent) {            element.detachEvent('on' + type, handler);        } else {            element['on' + type] = null;        }    },     // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)    stopPropagation : function(ev) {        if (ev.stopPropagation) {            ev.stopPropagation();        } else {            ev.cancelBubble = true;        }    },    // 取消事件的默认行为    preventDefault : function(event) {        if (event.preventDefault) {            event.preventDefault();        } else {            event.returnValue = false;        }    },    // 获取事件目标    getTarget : function(event) {        return event.target || event.srcElement;    },    // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;    getEvent : function(e) {        var ev = e || window.event;        if (!ev) {            var c = this.getEvent.caller;            while (c) {                ev = c.arguments[0];                if (ev && Event == ev.constructor) {                    break;                }                c = c.caller;            }        }        return ev;    }};
0 0