Javascitpイベントバインド方式の違い

Javascriptイベントバインドに関する資料はネット上にたくさんありますが、ここでは自分の使用中に出会った問題や考えをまとめます.
イベントバインド方式1.onlick="function(){}"2のようにDOMに直接バインドする.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”)
}

解析原因を2つ目の方法でイベントバインドすると、ページのロードが完了するにつれて、ページに既存の$(‘span’)オブジェクトのonclick属性値がpageとなり、ajaxリクエストを使用してリスト内容のリフレッシュを要求すると、新しい$(‘span’)オブジェクトのonclick属性はpage値ではなく、再クリックしてリフレッシュしないことになる.
2つ目の解決策はさっきバンゴの雑談JavaScriptのイベントバインドを見て、イベントのバインドを親要素('.pagelist')に移すことでこの問題を解決できると啓発された.
フォーム検証の差異

をバインドし、ブラウザデバッグモードでコードを変更してonsubmit="return function(){}"フォームを削除すると、検証せずに直接コミットできます.DOMオブジェクトプロパティバインドを使用すると、コードが変更されてもjsフォーム検証をスキップできません.