【jQuery】click 事件綁定方式比較

本篇重點

• $('選擇器').click() 的應用和使用時機
• $(document).on('click', '選擇器', function(){}) 的應用和使用時機
• .on('click', function() {}) 不是委派給 document 就無法適用在動態生成的元素

先了解這些會幫助你更快理解唷😁

【jQuery、css】解析六種組合選擇器：相連、+、～、>、,、空格

---

在前端開發中，經常需要偵測使用者對於網頁上元素的點擊事件，jQuery 中，可以使用 .click() 或 .on('click') 事件來偵測元素的點擊事件，雖然都是偵測點擊事件，但兩者有些差異。

$(選擇器).click()

應用重點

• 直接綁定點擊事件到指定的元素
• 只適用於當前 DOM 中已存在的元素
• 當指定元素被刪除，綁定的事件也會被刪除

使用時機

• 用於靜態元素，這些元素在 DOM 加載時已經存在且不會動態變更
• 適合簡單的事件綁定，不需要過多處理

健忘筆記

DOM（Document Object Model）是瀏覽器用來解讀和操作 HTML 或 XML 文件的結構化模型，它將 HTML 文件中的各種元素（如標籤、屬性、文本等）轉換為 JavaScript 可以操作的物件，讓開發者可以動態修改、刪除或新增內容，並控制網頁的行為。

範例

實例搶先看

$(選擇器).click()

• 直接綁定點擊事件到指定的元素
• 只適用於當前 DOM 中已存在的元素
• 當指定元素被刪除，綁定的事件也會被刪除

html

<button class="button is-link add_button">
    新增按鈕
</button>

js

let num = 1;
$('.add_button').click(function() {
    let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

點擊 “新增按鈕” 產生新按鈕，新的按鈕雖然 class 也有 .add_button，但無法產生新的按鈕

$(document).on(‘click’, ‘選擇器’, function(){})

應用重點

• 委派事件處理給 document，再綁定點擊事件到指定的元素
• 適用於當前或未來新增的元素
• 當指定元素被刪除，綁定的事件依然存在

使用時機

• 適用於動態生成的指定元素，確保事件觸發

範例

實例搶先看

$(document).on('click', '選擇器', function(){})

• 委派事件處理給 document，再綁定點擊事件到指定的元素
• 適用於當前或未來新增的元素
• 當指定元素被刪除，綁定的事件依然存在

html

<button class="button is-link add_button">
    新增按鈕
</button>

js

let num = 1;
$(document)on('click', '.add_button', function() {
    let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

點擊 “新增按鈕” 產生新的按鈕，新按鈕也可以產生新的按鈕

健忘筆記

早期的 jquery 是使用 .live()，但這個函數因為一些漏洞已在 jQuery 1.9 被刪除，所以請將 .live() 替換成 .on()
詳情請看【geeksforgeeks】Replace live() with on() in jQuery

如果 .on('click', function() {}) 不是委派給 document 會發生甚麼事

.on('click', function() {}) 不是委派給 document 就無法適用在動態生成的元素，只能綁定到當前 DOM 中已存在的元素

例如

實例搶先看

如果 .on('click', function() {}) 不是委派給 document 會發生甚麼事

不是委派給 document 就無法適用在動態生成的元素，只能綁定到當前 DOM 中已存在的元素

html

<button class="button is-link add_button">
    新增按鈕
</button>

js

let num = 1;

$('.add_button').on('click', function() {
        let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

$('.add_button').click(function() {
    let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

$('.add_button').on('click', function() {}) 和 $('.add_button').click(function() {}) 寫法不同，但兩者的效果是一樣的，都是綁定 click 事件到當前 DOM 中已存在的 .add_button 元素，動態生成的 .add_button 元素無法觸發事件

這兩種寫法的效果相同，但 .click(function() {}) 僅能偵測點擊事件；相比之下，使用 .on('click', function() {}) 更具彈性。除了偵測點擊事件，.on() 還能同時綁定多個事件，例如：.on('click mouseenter change', function() {})，因此在事件處理上提供了更多的靈活性。

結論

• click(function() {}) 是最簡單的事件綁定方式，適合靜態元素的單一點擊事件。
• $(document).on('click', function() {}) 是較複雜但更具彈性的方式，特別適合處理動態生成的元素或需要更靈活事件處理的情況。

根據具體使用場景選擇最適合的綁定方式，才能確保達到預期效果。如果你需要偵測點擊事件，不妨試試這兩種方式，看哪一種更符合你的需求！

動手做做看

codepen 線上編輯器

延伸閱讀

【jQuery 官方文件】.click() 介紹
【jQuery 官方文件】.on(‘click’, function() {}) 介紹
【天矽科技】DOM 是什麼?