[TOC] ## bind / on / click 區別 1. `click` 不支持 動態擴展的元素 2. `on` [推薦] 可監聽**動態**擴展的元素,通過第二個`selector`參數,但必須 其父元素不是動態添加的 ``` 格式: .on(events [,selector] [,data], handler) $('ul').on('click', 'li', function(){console.log('click');} $(document).on('click', ".click_class",function(){}) ``` 3. `bind` `格式 .bind(events [,eventData], handler)` 缺點: 1. 性能問題,會綁定到所有選擇元素上, 2. 不會綁定到動態添加的元素上 3. 頁面加載完,才能使用bind. 存在效率問題 優點: 1. 兼容性好, 2. `.click(),.hover()` 是其簡化處理結果 3. **如果使用 綁定的是`id`唯一等元素,可優先考慮`bind`** ## on / bind 方法對data 參數的使用 ``` function bindClick( event ) { var type = event.data.type; //可在事件參數的data屬性中獲取 if (type=="1") { alert(event.data.msg) }else if(type =="2"){ alert(event.data.msg) } }; $( "p" ).on( "click",{type:"1",msg:"hello"},bindClick ); $( "p" ).on( "click",{type:"2",msg:"word"},bindClick ); ``` ## 動態綁定點擊事件 把動態的類當作on 的第二個參數傳入 ``` $(document).on('click', ".click_class",function(){ Console.info("run here"); }); ```