zoukankan      html  css  js  c++  java
  • 使用javascript的“委托”实现attachEvent

    使用javascript的“委托”实现attachEvent

    上次介绍过使用js来实现委托的特性,今天说一下使用委托实现一些有用的功能。
    例如实现类似ie dom对象的其中一个方法:attachEvent
    attachEvent这个方法是用来绑定对象事件,在大量使用互交时的中经常会用到这个方法,不过在ie和firefox是使用不同的方法来实现,我们可以使用委托来重写这个方法:
    /**
     * function: 用委托的思想实现对象的事件绑定
     * author:   天边一只雁
     * blog:     http://harrychen66.cnblogs.com/
     
    */
    // 实现委托的类
    function delegate(func){
        
    this.arr = new Array(); // 回调函数数组
        this.add = function(func){
            
    this.arr[this.arr.length] = func;
        };
        
    this.run = function(){
            
    for(var i=0;i<this.arr.length;i++){
                
    var func = this.arr[i];
                
    if(typeof func == "function"){
                    func(); 
    // 遍历所有方法以及调用
                }
            }
        }
        
    this.add(func);
    }
    // 新建一个实现attach event的函数
    function fAttachEvent(obj,sEvent,func){
        
    if(!obj.dEv) obj.dEv = new delegate();
        obj.dEv.add(func);
        eval(
    "obj." + sEvent + " = function(){this.dEv.run()}");
    }
    // 建立一个button
    var btn = document.createElement("BUTTON");
    btn.value 
    = "action";
    // 绑定函数1
    var renderButton = function(){
        document.body.appendChild(btn);
    };
    // 绑定函数2
    var action1 = function(){
        alert(
    "action1");
    };
    // 绑定函数3
    var action2 = function(){
        alert(
    "action2");
    };
    // 绑定函数1到window对象的onload事件
    fAttachEvent(window, "onload", renderButton);
    // 绑定函数2到btn对象的onclick事件
    fAttachEvent(btn, "onclick", action1);
    // 绑定函数3到btn对象的onclick事件
    fAttachEvent(btn, "onclick", action2);
  • 相关阅读:
    在vim中设置将tab自动转化为4个空格
    nginx1.4.6+php5.5.11+mysql5.6.17+mecache+opcache
    Centos7安装杀毒软件ClamAV
    网页中meta标记
    js刷新页面方法大全
    微信第三方登陆,无需注册一键登录,获取用户信息,PHP实现方法
    phpcms v9 如何实现用户登录
    web页面自适应手机屏幕宽度
    微信公共平台消息回复类
    自动回复微信消息
  • 原文地址:https://www.cnblogs.com/niuniu502/p/734138.html
Copyright © 2011-2022 走看看