Javascript重复绑定事件的注意事项
前端实际开发中,经常需要给元素添加各种事件,如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;
}
以上。