为何要解绑后再绑定事件？示例中unbind click的作用及与仅bind的差异

为什么要先解绑再重新绑定？ #

这些场景下这么做很有必要：

• 防止重复触发逻辑：如果这段绑定代码会被多次执行（比如异步回调、组件更新循环里），每次直接bind都会给.bundle加一个新的点击事件处理器。到时候点一下元素，同一个逻辑会触发N次——比如重复发请求、重复修改DOM，搞出一堆bug。先unbind再bind能确保元素上始终只有一个该类型的事件处理器。
• 切换事件逻辑：当业务需要更新点击行为时，先把旧的处理函数清掉，再绑新的，能立刻切换到新逻辑，不会出现新旧逻辑同时触发的混乱情况。
• 清理遗留事件：如果之前的代码（比如第三方插件、其他模块）已经给.bundle绑过点击事件，unbind("click")能把所有旧的点击事件都清掉，保证新绑定的逻辑是唯一生效的。

例子里unbind("click")的作用 #

就是把.bundle元素上所有已经绑定的click事件处理器全部移除，不管之前绑的是什么函数，都会被清理干净。

和直接用bind的差异 #

1. 事件处理器数量
   • 先解绑再绑定：执行完后，.bundle上只会有这一个新的点击事件处理器。
   • 直接绑定：如果之前已经绑过点击事件，执行后会新增一个，点击元素时所有绑定的函数都会按顺序跑一遍。
2. 逻辑执行的唯一性
   • 前者能保证点击时只触发当前绑的逻辑，不会有重复或冲突的旧逻辑捣乱。
   • 后者可能会出现多次绑定导致的重复执行（比如循环调用绑定代码），或者新旧逻辑同时生效的问题。
3. 对原有事件的影响
   • 前者会彻底清除旧的点击事件，不管是自己写的还是其他代码绑的。
   • 后者不会碰已有的事件，只是新增一个。

内容的提问来源于stack exchange，提问作者Erick