2017-10-11 分类：JavaScript 作者：管理员 阅读（8597）
最近在一个项目开发中遇到事件被重复绑定，如果处理不好就会出现同一事件触发多次的问题，今天我抽出了一点时间把这个问题抛出来给大家说一下原因及解决方法。
在这里我们就废话不多说了，我直接上一个简单的例子，页面上有一个按钮，当点击按钮时创建一个类名为test-btn的button代码插入类名为area的div中，接着点击该button，console.log一段文本，下面是全部代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <head> <style> #tableBox{ width:100px; height:30px; background:red; border:1px solid red; text-align:center; line-height:30px; border-radius:5px; } .area{ width:100px; height:100px; margin-top:40px; border:2px; border:1px solid #000; } </style> </head> <body> <div id="tableBox" class="add">按钮</div> <div class="area"></div> <script> $(function(){ $(".add").on('click',function(eve){ $(".area").append("<button class='test-btn'>test button</button>"); $(".area").on('click','.test-btn',function(event){ console.log("test button ....."); }); }); }); </script> </body> |
运行代码结果是：当第一次点击按钮时，成功创建了一个button，再点击这个button执行打印出”test button…”，此时看着好像一切都是那么正常，没什么问题，可是当接着再点击第二次按钮时，此时创建出来第二个button时，再点击刚才第一次创建出来的button，打印出来了3次结果，也就是说点击一次，执行了二次代码。以此类推… 当第三次点击时，就执行了三次代码。貌似这个简单的例子就能很清楚的说明，事件被重复绑定了，好咱们先不着急着找解决方法，我们先来找找原因的所在，再来对症下药。
我们分析分析上面那段代码像这么写有什么问题？为什么事件会多次执行？
可以看出第二次事件绑定和第一次的事件绑定都注册到了同一个按钮身上，只要不消毁就会累计执行。
这就是根本原因所在。可能有的人此时想到是不是因为事件冒泡的原因，那我们阻止完了事件冒泡结果是什么样呢？下面咱们就再来一例，基于上面的js代码稍作修改后是这样的：
1 2 3 4 5 6 7 8 9 10 11 12 | <script> $(function(){ $(".add").on('click',function(eve){ $(".area").append("<button class='test-btn'>test button</button>"); $(".area").on('click','.test-btn',function(event){ event.stopPropagation(); console.log("test button ....."); }); }); }); </script> |
事实会告诉你结果是一样的，这个跟事件冒泡没有任何的关系，其实我们可以看看原因是不是在绑定时才会出现多次执行呢？那我们来试下不用on来进行事件绑定，看看执行结果是什么，这里我们再次修改代码如下：
1 2 3 4 5 6 7 8 9 10 | <script> $(function(){ $(".add").click(function(eve){ $(".area").append("<button class='test-btn'>test button</button>"); $(".test-btn").click(function(){ console.log("test button ....."); }); }); }); </script> |
其实结果依然一样，在事件执行的时候会执行该元素上重复绑定的所有事件。那这个问题我们该如何解决呢？好了，这里我也不卖关子了，下面我来给大家说说解决方法，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> $(function(){ $(".add").on('click',function(eve){ $(".area").append("<button class='test-btn'>test button</button>"); //解除 $(".area").off("click"); //再绑定 $(".area").on('click','.test-btn',function(event){ console.log("test button ....."); event.stopPropagation(); }); }); }); </script> |
1 2 3 4 5 6 7 8 9 10 11 12 | <script> $(function(){ $(".add").on('click',function(eve){ $(".area").append("<button class='test-btn'>test button</button>"); }); $(".area").on('click','.test-btn',function(){ console.log("test button ....."); }); }); </script> |
好了上面只是一个小例子，用来助于大家更容易的理解病因，如果还有朋友不理解，可以试着跑跑上面代码，相信会让你的人生充满记忆 ~
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码 
何を言っていますか？あなたの意味がよく分かりませんでした。
评：利用node快速压缩图片、视频(突破某网站单次最多20张限制)污泥螺杆泵
评：利用node快速压缩图片、视频(突破某网站单次最多20张限制)不清晰，等清晰的出来再看了！
评：电影《 诛仙 》在线观看(免费共享)完整无删减百度云迅雷种子不了解帝国CMS
评：wordpress编辑器增加pre自定义标签那么请问 楼主知道帝国cms怎么在编辑器里面加pre元素并实现代码高亮吗
评：wordpress编辑器增加pre自定义标签目前文章上面就是剥离的源码呀，只是你需要搭建环境和数据库才能跑起来
评：基于vue+koa2+socket.io实现多人在线实时聊天
共有 0 条评论 - JS事件重复绑定及触发多次的解决方法