close
首先為什麼要特別紀錄這篇 ?
 
因為有遇到一個很特別的情況，當使用onclick="func()"
這種語法當作參數的時候，客戶端會擋必須要改寫成其他方式以達成相同的效果
所以特別就紀錄一下
 
要被執行的javascript
function divFunction(){
    alert("Hello world");
}
 
◆ 使用HTML 的onclick tag呼叫 method
 
<input type = 'button'  onclick="myFunction()" value="Click me."></input>
 
這個標籤轉換成 javascript or JQuery的語法，就我所知有五種語法可以達成相同的效果
javascript - onclick
javascript - addEventListener
JQuery - .live()
JQuery - .on()
JQuery - .click()
 
以下是就這五種語法的比較
 
 
javascript - onclick
javascript - addEventListener
  • 支援的較廣  -  只要有支援javascript的瀏覽器都適用
  • 同一個DOM元件，附加兩個以上的事件的時候，事件會被比較晚宣告的覆蓋過去
  • 支援的瀏覽器較少  -  除了較早的IE版本(IE9以前)，可以跨瀏覽器使用
  • 同一個DOM元件，附加兩個以上的事件的時候，不會被覆寫
 
p.s. IE9以前必須使用 attachEvent 代替
 
 
 
接著先比較JQuery 的 on 與 live這兩種語法
根據官方說法 ， live已經不推薦使用，
因為 live 有以下缺點
  • 不支援使用多個語法所找到的元件  EX  $( "a" ).find( ".offsite, .external" ).live( ... );
  • 會有效率 & 空間 上的問題(因為藉重DOM事件會由子元素一路向父元素Bubble Up的特性)
  • 在多數的移動裝置上，可能會失效
  • 其他...
參考資料:
  1. 官方API : http://api.jquery.com/live/    
  2. 中國部落格 : http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html
  3. 黑暗執行緒 : http://blog.darkthread.net/post-2011-10-14-delegate-vs-live.aspx
          
 
如果想要達成相同的功能的話，建議使用較新的 on 取代
 
 
那 .on 與 .click比較呢 ?
其實根據官方說法
.click其實就是 .on 的簡寫方式
所以基本上 .click可以做到的事情， .on都可以做到
但是有些 .on 可以做到的事情 . click卻不一定做得到
 
.click
.on
$( "#btn1" ).click(function() {
    alert("Hello word" );
});
 
$("#btn2").on('click',function(){
    alert('Hello word')
});
 
 
參考自 
  1. 官方 API : https://api.jquery.com/click/
  2. 台灣部落格 : http://skaih.logdown.com/posts/712464-jquery-click-on-the-where-different
 
 
 
總結，以上 五種觸發click語法
如果以後我又遇到必須要綁定 click事件的時候，我會選哪個呢?
在沒有其他限制下，視情況而定選擇  .click() or .on()
因為跟使用 javascript比起來，使用JQuery會省下許多處理跨瀏覽器的問題
而且 JQuery  .on() 也可以做到多重事件綁定的功能
 
 
 
以下是這五種語法的簡單示範(記得搭配最上方的javascript divFunction  使用)
 
 
◆ 使用javascript onclick語法
 
<input type = 'button'  id = "demo" value="Click me."></input>
<script>
document.getElementById("demo").onclick = function() {divFunction()};
</script>
 
 
◆ 使用javascript addEventListener 語法
 
<input type = 'button'  id = "demo" value="Click me."></input>
<script>
document.getElementById("demo").addEventListener("click", divFunction);
</script>
 
 
◆ 使用JQuery live 語法
 
<input type = 'button'  id = "demo" value="Click me."></input>
 
<script>
$("#demo").live( 'click', function(){
divFunction();
});
</script>
 
 
◆ 使用JQuery  click 語法
 
<input type = 'button'  id = "demo" value="Click me."></input>
 
<script>
$( "#demo" ).click(function() {
divFunction();
});
</script>
 
 
使用JQuery on語法
 
<input type = 'button'  id = "demo" value="Click me."></input>
 
<script>
$( "#demo" ).on( "click", function() {
divFunction();
});
</script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

arrow
arrow
    文章標籤
    javascript - onclickjavascript javascript - addEventListener JQuery - .live() JQuery - .on() JQuery - .click()
    全站熱搜

    sonyvsshadow 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄