Javascitp事件綁定方式之差別

關於javascript事件綁定的資料網上已有不少，這裏總結本身使用過程當中遇到的問題及得出的想法。

事件綁定的方式
1. 在DOM中直接綁定，如onlick=」function(){}」
2. DOM對象屬性綁定，如obj.onclick=function(){}
3. DOM對象obj.attachEvent("onclick",function(){}) 進行綁定

某日作一ajax分頁顯示
html代碼以下：

<p class="pagelist"> 
    <span class="cur">1</span> 
    <span>2</span> 
    <span>3</span>
</p>

Javascript代碼以下：

$(‘span’).click(page);
Function page(){
    //發送請求，接收新頁面內容，並生成新的分頁列表
    $.post(url,postdata,function(data){
        $(‘. pagelist’).html(data.pagelist);
    },」json」)
}

出現問題
頁面加載完畢，點擊頁碼內容刷新，再次點擊頁碼內容不刷新

解決辦法
很笨的方法，換成了第一種綁定方式

<p class="pagelist"> 
    <span class="cur" onclick=」page()」>1</span> 
    <span onclick=」page()」>2</span> 
    <span onclick=」page()」>3</span>
</p>
Function page(){
    //發送請求，接收新頁面內容，並生成新的分頁列表，且新的分佈列表裏包含onclick綁定
    $.post(url,postdata,function(data){
        $(‘. pagelist’).html(data.pagelist);
    },」json」)
}

分析緣由
經過第二種方式進行事件綁定時，隨着頁面加載完成，頁面裏現有的$(‘span’)對象的onclick屬性值爲page,當使用ajax請求刷新列表內容後，新的$(‘span’)對象的onclick屬性並非page值，致使再次點擊不刷新。

第二種解決辦法
剛纔看了萬戈的閒談 JavaScript 之事件綁定，受到啓發，以爲應該能夠經過把事件的綁定上移至父級元素(‘. pagelist’)去解決這個問題。

 表單驗證上的差別
<form action=」」 method=」post」 onsubmit=」return function(){}」>
採用這種方式進行綁定，在瀏覽器調試模式下修改代碼刪除onsubmit=」return function(){}」表單就能夠不驗證直接提交。若是採用DOM對象屬性綁定，即便代碼被修改仍沒法跳過js表單驗證。