zoukankan      html  css  js  c++  java
  • js 事件的自定义函数

    转自:http://www.zhangxinxu.com/study/201203/js-custom-dom-events.html

    http://stylechen.com/trigger.html

    ie下例子

    var event = document.createEventObject();

    event.eventType = "message";

    document.fireEvent('ondata',event);

    高级浏览器

    var event = document.createEvent('HTMLEvents');

    event.initEvent('ondata',true,true);

    event.eventType='message';

    document.dispatchEvent(event);

    var $ = function(el) {
        return new _$(el);    
    };
    var _$ = function(el) {
        this.el = (el && el.nodeType == 1)? el: document;
    };
    _$.prototype = {
        constructor: this,
        addEvent: function(type, fn, capture) {
            var el = this.el;
            
            if (window.addEventListener) {
                el.addEventListener(type, fn, capture);
    
                var ev = document.createEvent("HTMLEvents");
                ev.initEvent(type, capture || false, false);
                // 在元素上存储创建的事件,方便自定义触发
                if (!el["ev" + type]) {
                    el["ev" + type] = ev;
                }
                
            } else if (window.attachEvent) {
                el.attachEvent("on" + type, fn);    
                if (isNaN(el["cu" + type])) {
                    // 自定义属性,触发事件用
                    el["cu" + type] = 0; 
                }
                
                var fnEv = function(event) {
                    if (event.propertyName == "cu" + type) {
                        fn.call(el);
                    }
                };
                
                el.attachEvent("onpropertychange", fnEv);
                
                // 在元素上存储绑定的propertychange事件,方便删除
                if (!el["ev" + type]) {
                    el["ev" + type] = [fnEv];
                } else {
                    el["ev" + type].push(fnEv);    
                }
            }
            
            return this;
        },
        fireEvent: function(type) {
            var el = this.el;
            if (typeof type === "string") {
                if (document.dispatchEvent) {
                    if (el["ev" + type]) {
                        el.dispatchEvent(el["ev" + type]);
                    }
                } else if (document.attachEvent) {
                	// 改变对应自定义属性,触发自定义事件
                    el["cu" + type]++;
                }    
            }    
            return this;
        },
        removeEvent: function(type, fn, capture) {
            var el = this.el;
            if (window.removeEventListener) {
                el.removeEventListener(type, fn, capture || false);
            } else if (document.attachEvent) {
                el.detachEvent("on" + type, fn);
                var arrEv = el["ev" + type];
                if (arrEv instanceof Array) {
                    for (var i=0; i<arrEv.length; i+=1) {
                        // 删除该方法名下所有绑定的propertychange事件
                        el.detachEvent("onpropertychange", arrEv[i]);
                    }
                }
            }
            return this;    
        }
    };




  • 相关阅读:
    GDB 运行PYTHON 脚本+python 转换GDB调用栈到流程图
    GDB-Dashboard-GDB可视化界面
    使用gdb调试Python进程
    从底层理解Python的执行
    python 用pdb调试
    GDB反向调试 + 指令记录+函数历史记录
    linux 0.11 源码学习+ IO模型
    LINUX系统全部参数 sysctl -a + 网络参数设置
    Linux Kernel 排程機制介紹
    linux 系统调优2
  • 原文地址:https://www.cnblogs.com/myzy/p/5227218.html
Copyright © 2011-2022 走看看