Js 和 jQuery 事件绑定与回调方法的 var型入参

最新推荐文章于 2022-10-31 22:53:58 发布

maozexijr

最新推荐文章于 2022-10-31 22:53:58 发布

阅读量325

点赞数 2

本文链接：https://blog.csdn.net/MAOZEXIJR/article/details/94038983

版权

1、Js原生的事件绑定方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定与入参</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>

<body>
<div id="div" style=" width: 80px;height: 80px;background-color: red;"></div>
</body>

<script>
    var div = document.getElementById("div");
    div.addEventListener('click', function () {
        alert("1");
    }, false);
    div.addEventListener('click', function () {
        alert("2");
    }, false);
</script>

</html>

触发事件后依次弹出：1 和 2

2、jQuery事件绑定方式

    $("#div").bind("click", function () {
        alert("1");
    });
    $("#div").bind("click", function () {
        alert("2");
    });

触发事件后依次弹出：1 和 2

3、关于事件的重复绑定

    var param1 = 1;
    $("#div").bind("click", function () {
        alert(param1);
    });

    var param2 = 2;
    $("#div").bind("click", function () {
        alert(param2);
    });

触发事件后依次弹出：1 和 2

4、回调函数的入参引用：入参不同名

    if (1 < 2) {
        var param1 = 1;
        $("#div").bind("click", function () {
            alert(param1);
        });
    }

    if (2 < 3) {
        var param2 = 2;
        $("#div").bind("click", function () {
            alert(param2);
        });
    }

触发事件后依次弹出：1 和 2

5、回调函数的入参引用：入参同名

    if (1 < 2) {
        var param = 1;
        $("#div").bind("click", function () {
            alert(param);
        });
    }

    if (2 < 3) {
        var param = 2;
        $("#div").bind("click", function () {
            alert(param);
        });
    }

触发事件后依次弹出：2 和 2

发生了什么？

6、循环绑定中的回调入参

与同名入参回调一致

    for (var i = 0; i < 2; i++) {
        $("#div").bind("click", function () {
            alert(i);
        });
    }

触发事件后依次弹出：2 和 2

原因？var 型变量作用域不是函数就是全局，回调函数引用的变量作用域为全局，所以 click 事件触发时入参始终为 2

7、解决回调入参同名问题方案一

    var array = [0, 1];

    $("#div").bind("click", function () {
        alert(array[0]);
    });

    $("#div").bind("click", function () {
        alert(array[1]);
    });

触发事件后依次弹出：0 和 1

8、解决回调入参同名问题方案二

    for (var i = 0; i < 2; i++) {
        var fun =
            " $('#div').bind('click', function () { " +
            "     alert('" + i + "'); " +
            " }); ";
        eval(fun);
    }

触发事件后依次弹出：0 和 1

9、解决回调入参同名问题方案三：最佳

    for (let i = 0; i < 2; i++) {
        $('#div').bind('click', function () {
            alert(i);
        });
    }

触发事件后依次弹出：0 和 1

let 关键字是 ES6 新特性，解决

Let definenation are not supported by current JavaScript version

类似错误，访问链接

10、解决回调入参同名问题方案四

//TODO 闭包

maozexijr

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫