價值這說明當事件處理程序以兩種不同的方式被分配不同的結果

Question

見我的代碼 http://jsfiddle.net/kxATT/3/

  function byId(id) { 
       if (id) { 
        return document.getElementById(id); 
       } else { 
        return null; 
       } 
      } 

      function setAttr(elm, attr, value) { 
       elm.setAttribute(attr, value); 
      } 

      var app = { 
       id: 12, 
       fn: function() { 
        alert(this.id); 
       } 
      }; 

      function init() { 
       setAttr(byId('txt'), 'onclick', 'app.fn()'); 
       byId('txt1').addEventListener('click', app.fn, true); 
      } 

當點擊第一個框，它提醒12。對於第二個盒子來說，這個盒子是txt1。很顯然，在這兩種情況下，儘管我打電話的功能相同，但是this指的是不同的對象。我聽說，對於輸入元素，元素的對象本身被傳遞給函數，並在事件處理函數中作爲this進行了處理。如果是這樣，爲什麼在使用setAttribute添加事件時不是這樣。

Answer 1

當您將字符串分配給onclick時，您基本上正在創建函數的正文;瀏覽器提供該功能，例如，您的字符串"app.fn()"變爲：

function onclickHandlerCreatedByBrowser(event) { 
    app.fn(); 
} 

當您通過addEventListener指定功能的參考，與任何時候你使用的JavaScript函數引用，它只是一個函數引用;沒有對象信息。 JavaScript中的this完全由調用函數的方式來設置，而不是它的定義位置。否則，通過提供瀏覽器提供的功能

byId('txt1').addEventListener('click', app.fn.bind(app), true); 

，你可以解決它：

如果您使用的是啓用ECMAScript5環境（或使用ES5墊片），你可以使用Function#bind解決這個在字符串中區分自己：

byId('txt1').addEventListener('click', function() { 
    app.fn(); 
}, true); 

更多閱讀：

• Mythical methods
• You must remember this

Answer 2

的this上下文是在一個事件處理程序中的對象，並在另一個input元件，其中id屬性對應於所述input元件的id屬性。