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

Posted 2023-04-07

方法一：通过事件在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>

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

参考技术A

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

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

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

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

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

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

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

Javascript事件对象

如果是事件处理函数绑定的函数，浏览器会默认传递一个参数，而这个参数就是事件对象。

document.onclick = function() {
    alert(arguments.length);        //1
}

 因为arguments[0]这样使用这个参数比较麻烦，所以我们可以传递一个参数evt来进行使用。

document.onmouseup = function(evt) {
    var e = evt || window.event;
    alert(e.button); //0为鼠标左键，1为滚轮，2为右键
    //基于浏览器可视区左上角的位置
    alert(e.clientX + ‘,‘ + e.clientY);
    //机器的分辨率
    alert(window.screen.width + ‘,‘ + window.screen.height);
    // 离屏幕左上角的位置
    alert(e.screenX + ‘,‘ + e.screenY);
}

//侦测按键
document.onclick = function(evt) {
    alert(getKey(evt));
}

function getKey(evt) {
    var e = evt || window.event;
    var keys = [];

    if (e.shiftKey) {
        keys.push(‘shift‘);
    }
    if (e.ctrlKey) {
        keys.push(‘ctrl‘);
    }
    if (e.altKey) {
        keys.push(‘alt‘);
    }

    return keys;
}

 

//键盘事件,keydown是按下任意键，keyup是弹起任意键，keypress按下字符键触发

//键码：键盘上任意键,全兼容
//字符编码：可以输出的字符的键，IE不兼容

document.onkeydown=function(evt){
        var e = evt || window.event;
        alert(e.keyCode);        //keyCode返回键码
    }

document.onkeypress = function(evt) {
        var e = evt || window.event;
        alert(e.charCode);         //charCode返回字符键码
    }


document.onclick = function(evt) {
        var e = evt || window.event;
        alert(e.target.innerHTML);         //点到哪里target就选中哪个元素
    }