JS绑定事件，传递参数

绑定事件的两种方式

1. 方式一（在属性上绑定事件）

<div οnclick=“ck('hello')” id=“div”></div> 

<script> 

    function ck(str){ 

        console.info(str); 

    } 

</script>

注意：在属性上绑定事件，是方法的调用，因此需要加（）表示调用此方法，如果需要传入参数则写入准确的参数。此方法可以传参数

 

2. 方式二（动态绑定）动态绑定不能传递参数

• 直接把方法名赋给属性。这种方式一般绑定不带参数的方法。如果给属性绑定带参数的方法，会默认传递事件对象。

<script>

    var odiv = document.getElementById(“div”);

    odiv.onclick = ck;//此处不能写成ck()

    function ck(){

        console.info("hello");

    }

</script>

• 给属性定义匿名方法。这种方法不能传参数。

<script> 

    var odiv = document.getElementById(“div”); 

    odiv.onclick = function (){ 

        console.info("hello"); 

    } 

</script>

 

解决动态绑定不能传递参数问题

var div=document.getElementById('div1');

div.onclik=function () { 

    fun("此处传入实参"); 

}

function fun(arg){

    alert(arg);

}

 

需要注意的是:

临时定义的这个函数中 this指的是div对象, 所以我们想传入div对象时使用 this就可以了

 

change事件绑定示例：为table表格中每一个input绑定change事件

window.onload = function(){

    var trNode = $(".contentTr");

    $.each(trNode,function(index,value){

       var inputNode = $(value).find("input");

       $.each(inputNode,function(i,val){

           val.onchange = function(){

               check(this);//这里this表示val这个input节点对象    

           }

           //如果不需要传递参数，可以直接val.onchange = check;

       }); 

    });

}

 

function check(ele){

    console.log(ele.value);//这里输出就是我们改变input单元格的值

}