jQuery的onclick事件导致点击事件累计触发的问题

问题场景

维护公司老项目的时候，发现以下问题。

在使用jQuery中的click事件对页面中某个元素对象进行绑定时，如果不采用防抖/节流的写法会出现事件被多次绑定的情况。如果发生这种问题，会导致一次触发请求多次的情况，直接导致服务器的压力飙升。严重的话，服务器会直接挂掉。接下来具体说一下这个问题是如何形成的。

​
<div onclick="handleClick()">点我</div>
<div id="boxId">触发</div>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>
<script>
    function handleClick(){
        $('#boxId').click(function(){
            console.log(123);
        });
    }
</script>
​

handleClick函数中的内容是让$(’#boxId’)对象绑定click事件，当我们不断触发handleClick事件时，假设触发10次handleClick函数，我们只要点击一次下边的click绑定事件，就会重复打印10次123。如果我们把代码换成对于后台的请求，那么就会出现请求10次的情况。

解决方案

其实jQuery中已经给了解决方案，只是我们在使用时忽略了这种情况的处理。我们可以从绑定事情这里入手，既然每调用一次函数就会绑定一次，那么我们就想办法让绑定事件只进行一次绑定就可以啦。就像我们先清空，再添加内容一样，避免多次添加进行累加就可以啦。

有两种方案可以实现只绑定一次的效果，其实都是通过解除绑定再重新进行绑定的方式来进行处理的。

第一种：

​
$('#boxId').unbind('click').bind('click',function(){
    console.log(123);
});
​

第二种：

​
$('#boxId').off('click').on('click',function(){
    console.log(123);
})
​

思考总结

元素对象绑定事件的行为，jQuery并没有自己清除掉之前绑定的方法，而是通过提供unbind和off来清除之前的绑定。经过对移动端zepto中的tap事件进行测试发现，tap事件绑定同样也存在这样的问题，要清除绑定的话，同样也可以使用这两种方式来清除之前的绑定关系即可。