第一種：HTML行內註冊

<input type="button" value="第一種方法" onclick="alert(‘我被調用了‘)">

　　缺點：事件的代碼太多，會使HTML的頁面會亂掉 。未有分離HTML和Js代碼

第二種：也是行內進行註冊

html：

<input type="button" value="第二種方法" onclick="han()">

js：

  function han(){
        alert("我被調用了");
    };

缺點：沒有把HTML和Js代碼進行分離。如果為按鈕註冊一個事件，需要翻到HTML上寫onclick。並且函數名重復會很困擾。

第三種：分離HTML和js的註冊事件

html：

 <input type="button" value="第三種方法" id="btn">    

js：

    <script>
    function my$(id){
     return document.getElementById(id);
    //   通用函數  
    };
     my$("btn").onclick = han;
    //  註冊事件,不能用han()否則會自動觸發
    </script>

缺點：

第四種：

html：

<input type="button" value="第四種方法" id="btn1">

js：

 <script>
        function my$(id){
     return document.getElementById(id);
    //   通用函數  
    };
    my$("btn1").onclick = function(){
        alert("我被調用了");
    };
    // 針對性強
    </script>

　　優點：針對性強

js註冊事件的各種方式