zoukankan html css js c++ java

js动态绑定事件

有关js动态绑定事件

//为元素绑定事件
function addEvent(elem,type,fn){
    if(window.addEventLister){
        elem.addEventLister(type,fn,false);
    }
    else if(window.attachEvent){
        elem.attachEvent("on"+type,fn);
    }
    else{
        elem["on" + type] = fn;
    }
}

//将元素和方法放到数组arrelems中
function bind(elem,fn){
    var arrtmp = new Array();
    arrtmp.push(elem)
    arrtmp.push(fn);
    arrelems.push(arrtmp);
}

//遍历元素
function etype(type){
    for(var i=0;i<arrelems.length;i++){
        if(document.getElementById(arrelems[i][0])!=="undefined"&&document.getElementById(arrelems[i][0])!==null){
            addEvent(document.getElementById(arrelems[i][0]),type,arrelems[i][1])
        }
    }
}

//绑定事件
function elemtype(type){
    var body = document.getElementsByTagName("body")[0];  
    etype(type);
    addEvent(body,type,function(){
        etype(type);
    });
}

demo：

<!DOCTYPE html>
<html>
    <head>
        <title>动态绑定事件</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <input id="btn1" type="button" value="确定" />
        <div  id="test">TODO write content</div>
        <div><span id="msg0">测试</span></div>
        <script type="text/javascript">
            var arrelems = new Array();
            //为元素绑定事件
            function addEvent(elem,type,fn){
                if(window.addEventLister){
                    elem.addEventLister(type,fn,false);
                }
                else if(window.attachEvent){
                    elem.attachEvent("on"+type,fn);
                }
                else{
                    elem["on" + type] = fn;
                }
            }
            
            //将元素和方法放到数组arrelems中
            function bind(elem,fn){
                var arrtmp = new Array();
                arrtmp.push(elem)
                arrtmp.push(fn);
                arrelems.push(arrtmp);
            }
            
            //遍历元素
            function etype(type){
                for(var i=0;i<arrelems.length;i++){
                    if(document.getElementById(arrelems[i][0])!=="undefined"&&document.getElementById(arrelems[i][0])!==null){
                        addEvent(document.getElementById(arrelems[i][0]),type,arrelems[i][1])
                    }
                }
            }

            //绑定事件
            function elemtype(type){
                var body = document.getElementsByTagName("body")[0];  
                etype(type);
                addEvent(body,type,function(){
                    etype(type);
                });
            }
        </script>

        <script type="text/javascript">
            var arrhtml = ['<span id="msg1">测试一</span>'];
            var btn1 = document.getElementById("btn1");
            addEvent(btn1,"click",function(){
                document.getElementById("test").innerHTML = arrhtml[0];
            });
            
            bind("msg0",function(){
                console.log("测试000000被点击了");  
            });
          
            bind("msg1",function(){
                console.log("测试1111111111被点击了"); 
            });
            
            elemtype("click");
        </script>
    </body>
</html>

查看全文

相关阅读:
结构型模式：装饰者
 SQL Server Collatation
实践SQLServer Tuning
导出jar包时需指定mainclass
垃圾回收
 web.config的部署
 控制反转与依赖注入
 Design Patterns Refcard
实践理解计算机启动过程
 备忘录(memento)

原文地址：https://www.cnblogs.com/kuikui/p/3021323.html