JavaScript重复绑定事件的注意事项

待我称王封你为后i 2022-01-31 06:59 258阅读 0赞

前端实际开发中，经常需要给元素添加各种事件，如**click**、**change**等等，那如果某种情况下，当我们给某元素**多次绑定了同一事件**，在此事件真正被触发时，会响应几次事件的执行？下面给一个例子说明：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <title>TEST</title> 
            <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
            </script>
            <script>
                $(document).ready(function(){
                    // 给p元素绑定了两次click事件
    	        for (var i = 0; i < 2; i++) {
    		    $("p").click(function(){
    			alert(123);
    		    });
    	        }
                });
            </script>
        </head>
        <body>
            <p>点我</p>
        </body>
    </html>

上面的例子给某指定元素绑定了多次click事件，当真正去点击指定元素时，将alert了几次？

我们先尝试通过火狐浏览器查看指定元素的**event**信息，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70][]

真相不远了，现在可以预期**event**会执行两次，实际运行情况也验证了此结果。所以，需要注意尽量避免有意无意地给某元素重复绑定**click**、**change**等事件，以免引起意想不到的多次响应。

有时候如果避免的手段比较麻烦，该如何快速处理呢？不妨设置一全局变量去控制，如下：

// 选择日期事件，只有在第一次进入dashboard.html中才去绑定，之后再点击dashboard菜单进入，不能继续给绑定
    if (!g.not_load) {
        $("input#dashboard-date").change(function() {
            if ($("#dashboard-date").val() !== "") {
                p0.fetchAjaxData();
            }
        });
        g.not_load = true;
    }

以上。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70]: /images/20220131/af6dccc9493047bcadf80231ea65bfdf.png