Javascript學習筆記13——關於響應事件

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

這裡簡單說下：

<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>

 

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