系列文章導(dǎo)航：

JavaScript學(xué)習(xí)筆記一——數(shù)據(jù)類型

JavaScript學(xué)習(xí)筆記二——函數(shù)

JavaScript學(xué)習(xí)筆記三——作用域

JavaScript學(xué)習(xí)筆記四——Eval函數(shù)

JavaScript學(xué)習(xí)筆記五——類和對象

JavaScript學(xué)習(xí)筆記六：prototype的提出

Javascript學(xué)習(xí)筆記七——原型鏈的原理

Javascript學(xué)習(xí)筆記八——用JSON做原型

Javascript學(xué)習(xí)筆記九——prototype封裝繼承

Javascript學(xué)習(xí)筆記十——網(wǎng)頁運行原理

Javascript學(xué)習(xí)筆記十一——包裝DOM對象

Javascript學(xué)習(xí)筆記十三——關(guān)于響應(yīng)事件

Javascript學(xué)習(xí)筆記十二——Ajax入門

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

這里簡單說下：

<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方法為靜態(tài)綁定，B方法為動態(tài)綁定。我們來看A方法，他近乎可等于這樣的效果：

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

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

我們來看這樣一段代碼，這也是我在公司初學(xué)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>

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

    <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學(xué)習(xí)筆記十三——關(guān)于響應(yīng)事件，轉(zhuǎn)載需保留來源！

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