最近做项目为一个添加按钮绑定点击事件，很简单的一个事情，于是我按照通常做法找到元素，使用JavaScript的addEventListener()方法为元素绑定了点击事件，点击同时发送请求。 

完成后看效果，第一次点击没有问题。再一次点击后发现发送了两次请求，后面再点击发现请求的数量越来越多。 
这时我初步判断可能是元素有多个或是多次调用了方法，但找了一遍，发现只为一个元素绑定了事件，且只调用了一次。 
后来通过查资料才知道是点击事件被累加绑定了！那到底什么是累加绑定呢？什么时候会发生累加绑定？累加绑定后该如何解决呢？下面我就通过这三个问题来说一下。

累加绑定：在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后你再次点击，元素又被绑定个一次点击事件，这样第二次点击就会执行两次，以此类推。

代码描述以及运行效果描述

写了个html页面，该页面主要作用是点击button（”给img添加点击事件”）给button下的图片添加点击事件方法。 

如图： 

Java中按钮双击事件监听 java按钮点击事件触发多次_Java中按钮双击事件监听

html：


 

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
6. <title>累加绑定</title>
7. </head>
8. <body>
9. <button id="btn" onclick="addClick()">给img添加点击事件</button>
10. <hr>
11. <img src="images/title.ico" id="cli"/>
12. <script>
13. count=1;
14. function addClick(){
15. var cli=document.getElementById("cli");
16. cli.addEventListener("click",function(){
17. alert(count++);
18. });
19. // 等价于下列jQuery的写法 
20. // $("#cli").click(function(){
21. // alert(count++);
22. // });
23. }
24. </script>
25. </body>
26. </html>

累加绑定运行效果： 

Java中按钮双击事件监听 java按钮点击事件触发多次_html_02

首先点击图片没有蹦出消息框。点击button后，给图片添加点击事件，此时点击图片蹦出了消息框。接着再点击图片，还是蹦出了消息框。随后我又点击了一次button给图片添加点击事件。此时点击图片竟然蹦出了两次消息框。

是不是很奇怪？

解决方案

解决方案有两种。

方法一：使用jQuery的one()方法。 

该方法为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。 

效果图： 

Java中按钮双击事件监听 java按钮点击事件触发多次_点击事件_03


 


 

方法二：配合off()方法解除绑定。 

该方法为元素绑定一个的事件处理函数，再次给改元素添加相同事件时不会累加绑定。 

效果图： 

Java中按钮双击事件监听 java按钮点击事件触发多次_点击事件_04


 

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
6. <title>累加绑定</title>
7. </head>
8. <body>
9. <button id="btn" onclick="addClick()">给img添加点击事件</button>
10. <hr>
11. <img src="images/title.ico" id="cli"/>
12. <script>
13. count=1;
14. function addClick(){ 
15. $("#cli").off("click").on("click",function(){
16. alert(count++);
17. });
18. }
19. </script>
20. </body>
21. </html