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>

相关阅读:
数据库学习之四--Join, Left Join, Right Join, Full Join对比
 数据库学习之三--Select查询及运算符
 数据库学习之二--SQL语句以及数据类型
 随身笔记 Python中__init__和self的意义和作用
 爬虫Request Header请求头各参数含义
 爬虫中的Header请求头在浏览器中通过F12和F5分析
 爬虫中的User-Agent 使用与作用
 Maven build 命令介绍（转）
Linux 确定tomcat的运行状态命令
 Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.解决办法
原文地址：https://www.cnblogs.com/kuikui/p/3021323.html