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
|
|
p.s. IE9以前必須使用 attachEvent 代替
|
接著先比較JQuery 的 on 與 live這兩種語法
根據官方說法 ， live已經不推薦使用，
因為 live 有以下缺點
- 不支援使用多個語法所找到的元件 EX $( "a" ).find( ".offsite, .external" ).live( ... );
- 會有效率 & 空間 上的問題(因為藉重DOM事件會由子元素一路向父元素Bubble Up的特性)
- 在多數的移動裝置上，可能會失效
- 其他...
參考資料:
- 官方API : http://api.jquery.com/live/
- 中國部落格 : http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html
- 黑暗執行緒 : 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')
});
|
參考自
- 官方 API : https://api.jquery.com/click/
- 台灣部落格 : 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>
文章標籤
全站熱搜
留言列表
