jQuery - 事件綁定bind / live / delegate /on 2017-01-11
傳統既有的物件上,
通常我們會用click , hover等函數,
但是對於新增物件時,
因為沒有被綁上事件,
所以不會有任何動作.
因此才有bind , live , delegate , on綁定事件的功能,
相反的想去除事件可以用unbind , die , undelegate , off的方式去除綁定事件,
1.bind為手動對既有的物件進行綁定動作,
但後續新增的JS物件綁定較為繁雜.
$("元素").bind("事件", 執行內容);
反向解除為unbind
$("元素").unbind(事件);
$("元素").unbind(); //全部事件都解除
2.live最大的問題是如果物件相當多時執行效率不佳,
目前1.9版以後已經將live移除.
$("元素").live("事件", 執行內容);
反向解除為die
$("元素").die(事件);
3.delegate效能上較live好,
但是既有物件可能會有事件重複綁定,
因此也較最新的on來得不佳.
$("母元素").delegate("子元素" , "事件" , 執行內容);
反向解除為undelegate
$("元素").undelegate(事件);
4.on為目前的主流,
除了效能佳不會有重複綁定的問題外,
還有一個優點是撰寫起來較delegate順手(delegate第一個值是寫子元素,比較不是平常習慣性寫法)
$("母元素").on("事件" , "子元素" , 執行內容);
反向解除為off
$("元素").off(事件);