Javascript綁定事件的兩種方式的區別

命名函數

<input type="button" onclick="check()" id="btn"/>
<script type="text/javascript">
    function check(){
        //code
    }
</script>

匿名函數

<input type="button"  id="btn"/>
<script type="text/javascript">
    window.onload = function(){
        //先獲取元素對象，再綁定事件，綁定的是匿名函數不可重用
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            //code
        }
    }
</script>

以前一直以為兩種方式的區別不大，直到今天遇到這段代碼

<img src="/path" id="img" onclick="change()"/>
<script type="text/javascript">
    //每次點擊給圖片地址後面加隨機的查詢參數
    function change(){
        this.src = "/path?num="+Math.random();
    }
</script>

運行後發現，點擊後src沒有變化，調試發現，這裡this是window對象，而不是img標簽對象。

頓時感覺有點迷惑，因為以前綁定事件中，拿標簽屬性都是用的this，怎麼這裡不對了？

原來是我搞混了，兩種綁定方式的區別。

命名函數聲明是視窗的對象中，this代表視窗對象。

匿名函數聲明實際是在標簽對象內部，this代表標簽對象。

如果要在命名函數中拿到對應的元素對象，可以這樣寫

<input type="button" value="btn" onclick="change(this)">
<script type="text/html">
function change(element){
    element.value = "new_btn";  
}
</script>