js动态绑定事件并传参数的步骤整理

js动态绑定事件并传参数的方法整理

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
table {
border: 1px solid #9999cc;
color: red;
}
td {
font-family:Arial, Helvetica, sans-serif, 宋体;
font-size: 12px;
color: red;
cursor:default;
}
input.readonly {
padding-right: 1px;
padding-left: 1px;
padding-bottom: 2px;
padding-top: 2px;
border: 1px solid #9999cc;
background: #efefef;
}
.textinput {
border: 1px solid #9999cc;
background:#FFFFCC;
line-height: 16px;
font-size: 12px;
}
</style>
</HEAD>

<BODY>
<TABLE id="mytable">
<TR>
<TD><input type="text" name="name" value="11111111" readonly="true"/></TD>
<TD><input type="text" name="name" value="11111111"/></TD>
<TD><input type="text" name="name" value="11111111"/></TD>
<TD><input type="text" name="name" value="11111111"/></TD>
<TD><input type="text" name="name" value="11111111"/></TD>
</TR>
<TR>
<TD><input type="text" name="name" value="22222222"/></TD>
<TD><input type="text" name="name" value="22222222"/></TD>
<TD><input type="text" name="name" value="22222222"/></TD>
<TD><input type="text" name="name" value="22222222"/></TD>
<TD><input type="text" name="name" value="22222222"/></TD>
</TR>
<TR>
<TD><input type="text" name="name" value="33333333"/></TD>
<TD><input type="text" name="name" value="33333333"/></TD>
<TD><input type="text" name="name" value="33333333"/></TD>
<TD><input type="text" name="name" value="33333333"/></TD>
<TD><input type="text" name="name" value="33333333"/></TD>
</TR>
<TR>
<TD><input type="text" name="name" value="44444444"/></TD>
<TD><input type="text" name="name" value="44444444"/></TD>
<TD><input type="text" name="name" value="44444444"/></TD>
<TD><input type="text" name="name" value="44444444"/></TD>
<TD><input type="text" name="name" value="44444444"/></TD>
</TR>
</TABLE><br>
<TABLE id="mytable2"></TABLE>
</BODY>
<script type="text/javascript">
var tds = document.getElementsByTagName("td");
var trs = document.getElementsByTagName("tr");
var tab2 = document.getElementById("mytable2");
var tdlen = tds.length;
var trlen = trs.length;
for(var i=0;i<tdlen;i++){
  //tds[i].onclick=tdClick;
}
for(var i=0;i<trlen;i++){
  trs[i].onclick=trClick;
  trs[i].onclick.x = i+1;
  //alert(trs[i].onclick);
}

function tdClick(str){
  var tab22 = document.getElementById("mytable2");
  var t2body = tab22.children[0];
  t2body.apendChildren(this.parentNode);
}

function checkRowExit(tableObj, rowId){
  var trs = tableObj.rows;
  var trl = trs.length;
  for(var i=0; i<trl; i++){
   if(trs[i].id == rowId){
    return false;
   }
  }
  return true;
}

function trOndblclick(){
  var rowIndex = this.rowIndex;
  var table = this.parentNode.parentNode;
  table.deleteRow(rowIndex);
}
</script>
</HTML>

=====================================================================

<html >
<body>

<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>

</body>
</html>

<script type="text/javascript">
var p = document.getElementsByTagName("p");
var len = p.length;
function fn1(){
    for(var i=0; i<len; i++){
        p[i].setAttribute("x",i+1);
        p[i].onclick = function(){
            alert(this.getAttribute("x"));
        };
    }
}
//fn1();

function fn2(){
    for(var i=0; i<len; i++){
        p[i].onclick = function(){
            alert(arguments.callee.x);
        }
        p[i].onclick.x = i+1;
        //or
        /*
        (p[i].onclick = function(){
            alert(arguments.call.x);
        }).x = i+1;
        */
    }
}
//fn2();
// ----------------- 以上是保存变量在对象中。

function fn3(){
    for(var i=0; i<len; i++){
        p[i].onclick = (function(x){
            var y = i+1;
            return function(){   //返回一个闭包，引用了来自外层的变量
                alert(x);        // 参数形式
                alert(y);        // 变量形式,外层函数执行可以不带参数.
            };
        })(i+1);
    }
}
//fn3();

function fn4(){
    for(var i=0; i<len; i++){
        (function(x){                 //利用自执行的匿名函数激发作用域。体会和fn3的区别。
            var y = i+1;              //fn3和fn4同样是闭包，不过fn3是在函数外引用闭包，fn4是在函数内引用闭包。
            p[i].onclick = function(){
                alert(x);
                alert(y);
            }
        })(i+1);
    }
}
//fn4();
// ----------------------以上变量保存在闭包中

function fn5(){
    for(var i=0; i<len; i++){
        var str = "alert("+(i+1)+")";      //利用new Function声明函数。
        p[i].onclick = new Function(str); //这种方法相当于对每一个p[i]单独声明了一个构造好的函数.
    }
}
fn5();

//总结
/*
    fn5的效率无疑是最差的，因为new Function的问题，所以不建议使用。
    fn3,fn4利用闭包的特性，分别在内存中持久了每一个i的变量。这里可以帮助理解闭包的作用。
    fn1,fn2将变量保存在对象上，效率最高，对于大量的绑定建议使用。
*/

</script>

js动态绑定事件并传参数的步骤整理

相关推荐