js解决动态绑定事件时不能传参的问题

问题描述:

js使用dom给元素绑定事件时如果直接传入参数,

会有传参失败并且语句会执行并没有成功绑定事件的情况

举个例子,假如我们有一个div (id="div1"), 我们想给它绑定一个onclick事件并传入字符串参数:

(错误案例, 会导致如上后果)

var div=document.getElementById('div1');
div.onclik=fun('传入实参');
function fun(arg)
{
    alert(arg);
}

会导致加载页面时就执行了,并没有等到点击事件触发, 并且点击后不执行;

 

 正确的绑定方式是这样的:

var div=document.getElementById('div1');
div.onclik=fun;
function fun()
{
    alert("");
}

 也就是直接把方法名赋给 dom对象的onclick事件,

但这样就不能传参了啊, 别急,老衲有一妙计

带参数的绑定:

var div=document.getElementById('div1');
div.onclik=function () { fun("此处传入实参");  }

function fun(arg)
{
    alert(arg);
}

 也就是说除了直接把方法名赋给 dom对象的onclick事件,

还可以在onclick事件事件后定义一个方法, 我们可以在方法体中掉用我们真正的方法并传入我们想要的参数,

需要注意的是:

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