jQuery 的 delegate 和 on 方法是用來綁定事件的兩個函數,它們都起到了添加事件監聽器的作用,但是它們在具體使用上還是有一些不同的。
// delegate 語法 $(selector).delegate(childSelector,event,data,function) // on 語法 $(selector).on(event,childSelector,data,function)
delegate 方法綁定事件的語法與 on 方法有些不同,其將事件監聽器綁定在指定元素的子元素上,可以理解為是對后代元素進行事件委派。而 on 方法則是直接在被選擇元素上綁定事件監聽器。
下面展示一個具體的例子,當按鈕被點擊時,通過 delegate 綁定的監聽器會獲取到事件target
,并輸出到控制臺上。
// 點擊 btn 按鈕 $("body").delegate(".btn", "click", function(event){ console.log(event.target); });
而當使用 on 方法時,實現同樣的效果需要做出如下改動。
// 點擊 btn 按鈕 $("body").on("click", ".btn", function(event){ console.log(event.target); });
可以看到,on 方法與 delegate 方法在綁定事件監聽器時的語法略有不同,但是它們的用途非常相似。
總之,當需要在子元素上綁定事件監聽器時,我們可以使用 delegate 方法;而需要在被選擇元素上綁定事件監聽器時,我們可以使用 on 方法。這兩個函數在 jQuery 開發中十分常用,是編程的基石,有了它們我們的開發工作會更加順暢。