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

最新推荐文章于 2022-04-20 18:09:16 发布

weixin_34318272

最新推荐文章于 2022-04-20 18:09:16 发布

阅读量125

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/songzehao/p/11000724.html

版权

前端实际开发中，经常需要给元素添加各种事件，如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信息，如下：

真相不远了，现在可以预期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;
}

以上。

转载于:https://www.cnblogs.com/songzehao/p/11000724.html