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>