1. 程式人生 > >jQuery中用on繫結事件和用bind繫結事件的區別

jQuery中用on繫結事件和用bind繫結事件的區別

jQuery兩種繫結事件,舉例說明:

以上三種方法都是對ul下的li進行繫結

其中方法一和方法二完全一樣,作用是:給ul下已經存在的li新增繫結事件,方法繫結在了li上,一旦出現新的li,點選方法是無法繫結在新的li上的。 因為繫結方法已經完成,任務分發到各個li上,由li對點選後的方法進行操作。此時新增li是無法再次執行繫結事件的。如果強制再次執行一次繫結,則出現的結果是:已經繫結過的li被重複繫結,當li被點選後會重複兩次console.log()事件(以上部分程式碼為例)。

第三種方法正好解決這個繫結問題,不一樣的是:這種繫結方法是給ul進行繫結,相當於li被點選後,由ul分配需要執行的方法,此方法只需要繫結一次,不需要迴圈即可對ul下所有的li進行時間繫結。再新增新的li後,不需要對li有任何繫結操作,因為事件在li被點選後才開始進行的。

對於取消重複繫結,bind還有另一種方法,如下:

對於事件繫結推薦使用方法三,優點是:可以對元素動態繫結,執行速度快,效率高。