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

问题描述:
 
举个例子,假如我们有一个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就可以了