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事件綁定同樣也存在這樣的問題，要清除綁定的話，同樣也可以使用這兩種方式來清除之前的綁定關係即可。