Question

javascript如何给事件处理函数传递参数

Answer 1

方法一：通过事件在html中的内联方式来传递参数（假定变量x是参数，下同）：

<input type="button" value="点我" onclick="var x=123;test(x);"/>
<script>
function test(x){
   alert(x);
}
</script>

方法二：通过全局变量来传递参数：

<input id="abc" type="button" value="点我"/>
<script>
var x=123;
window.onload=function(){
   document.getElementById("abc").onclick=function(){
      alert(x);
   }
}
</script>

方法三：通过对象的自定义属性来传递参数：

<input id="abc" type="button" value="点我"/>
<script>
window.onload=function(){
   var abc=document.getElementById("abc");
   abc.x=123;
   abc.onclick=function(){
      alert(this.x);
   }
}
</script>

方法四：利用闭包：

<input id="abc" type="button" value="点我"/>
<script>
window.onload=function(){
   (function(x){
      document.getElementById("abc").onclick=function(){
         alert(x);
      }
   })(123);
}
</script>

暂时就想到这么多了，肯定还有其他方法的。

Answer 2

在js中，函数名加括号的时候就会自动执行，简单的加上参数也会自动执行。

也就是说window加载的时候就执行代码了，意味着给事件添加这种自定义函数的时候只能执行一次，所以传递参数只能间接执行，解决方案如下：

不直接将函数名赋予给事件，而是将你自定义的函数函数+参数放在事件函数的里面，这样就事件触发你的函数就能重复执行了。

function a(b){alert (b)};
let b="hello word!";
document.onclik=function(){
    a(b);//间接传递参数
}

Answer 3

设置一个全局对象（window对象下的对象），将参数全部存在该对象：

//创建window对象下的对象，用于存储需要的变量，各个地方都可以为该对象新增、更改、读取属性
mydata={};

function fun1(){
mydata.a="123";//设置一个变量a
......
};
function fun2(){
mydata.a="456";//更改变量a
......
};