JavaScript（JS）调用事件监听器（事件处理函数/事件处理程序/事件监听函数）时如何传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的演示代码</title>

</head>
<body>
<input id="bt" type="button" value="test">
<script !src="">
    function test(a) {
      
      
        alert("hello" + a);
    }

    var bt = document.getElementById("bt");
    // 只能指定函数对象
    bt.onclick = test;// 如何传参呢？
</script>
<!--onclick 属性只能指定代码-->
<input type="button" value="test2" onclick="test();">
</body>
</html>

如上代码，使用 bt.onclick =注册点击事件监听器，那么当点击事件发生时，如何在调用事件处理函数时传参呢？因为函数 test(a) 是可以接收一个参数的。

但是 bt.onclick = test(2); 这样是不行的，因为页面加载时就直接调函数 test(a)了。bt.onclick = "fun(2)"; 这样也不行，点击无效。

最后找到答案了，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script !src="">
        function fun(a) {
      
      
            alert(a);
        }

        window.onload = function () {
      
      
            var bt = document.getElementById("test");
            bt.onclick = () => {
      
      
                fun(1)
            };
        };
    </script>
</head>
<body>
<input id="test" type="button" value="test">
</body>
</html>

JavaScript（JS）调用事件监听器（事件处理函数/事件处理程序/事件监听函数）时如何传递参数

猜你喜欢