系列文章導航：

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六：prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

具體的事情記不清了，某一天下班后聽到兩個同事在說關于關于事件的問題。

這里簡單說下：

<input type="button" runat="server"  value="Click Me" id="ButtonTest" />

很普通的一個按鈕，我們要為其添加點擊事件，有兩種方法：

A.

    <input type="button" runat="server" onclick="Alert()" value="Click Me" id="ButtonTest" />    <script type="text/Javascript">        function Alert() {            alert("Click Me");        }    script>

B.

    <input type="button" runat="server" value="Click Me" id="ButtonTest" />    <script type="text/Javascript">        document.getElementById("ButtonTest").onclick = function () {            alert("Click Me");        }    script>

我們稱A方法為靜態綁定，B方法為動態綁定。我們來看A方法，他近乎可等于這樣的效果：

    <input type="button" runat="server" onclick="Alert()" value="Click Me" id="ButtonTest" />    <script type="text/Javascript">        document.getElementById("ButtonTest").onclick = function () {            Alert();        }    script>

也就是說，當我們靜態綁定一個事件的時候，實際上是系統默認為我們做了一個匿名函數，然后把我們的方法體包于其中。由于這樣，就涉及到了this的問題。

我們來看這樣一段代碼，這也是我在公司初學JS的時候，公司的JS小牛拋給我的問題。

    <input type="button" runat="server" onclick="Alert1()" value="Test1" id="ButtonTest1" />    <input type="button" runat="server" onclick="Alert2(this)" value="Test2" id="ButtonTest2" />    <script type="text/Javascript">        function Alert1() {            alert(this.value);        }        function Alert2(obj) {            alert(obj.value);        }    script>

當試驗這樣一段代碼時，便會發現第一個按鈕會彈出”undefined”，第二個按鈕彈出”Test2”。原因就是如我上面所說，在按鈕一中，方法等于聲明了一個匿名函數，然后講Alert1()閉包于其中，也就是說，Alert1()是無法找到其調用者的，所以這時，他會去找window對象的value屬性，結果發現未定義，我們可以這樣證明：

    <input type="button" runat="server" onclick="Alert1()" value="Test1" id="ButtonTest1" />    <input type="button" runat="server" onclick="Alert2(this)" value="Test2" id="ButtonTest2" />    <script type="text/Javascript">        value = "window";        function Alert1() {            alert(this.value);        }        function Alert2(obj) {            alert(obj.value);        }    script>

運行上面的代碼，就可以很好地理解問題了！

it知識庫：Javascript學習筆記十三——關于響應事件，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。