JS事件處理常式

在 JavaScript 中，事件處理常式是一類特殊的函數，與函數直接量結構相同，主要任務是實現事件處理，為非同步呼叫，由事件觸發進行響應。

事件處理常式一般沒有明確的返回值。不過在特定事件中，使用者可以利用事件處理常式的返回值影響程式的執行，如果單擊超連結時，禁止預設的跳轉行為。

範例1

下面範例為 form 元素的 onsubmit 事件屬性定義字串指令碼，設計當文字方塊中輸入值為空時，定義事件處理常式的返回值為 false。這樣將強制表單禁止提交資料。

<form id="form1" name="form1" method="post" action="http://www.mysite.cn/" onsubmit="if (this.elements[0].value.length==0) return false;">
    姓名：<input id="user" name="user" type="text" />
    <input type="submit" name="btn" id="btn" value="提交" />
<form>

 在上面程式碼中，this 表示當前 form 元素，elements[0] 表示姓名文字方塊，如果該文字方塊的 value.length 屬性值長度為 0，表示當前文字方塊為空，則返回 false，禁止提交表單。

事件處理常式不需要引數。在 DOM 事件模型中，事件處理常式預設包含 event 引數物件，event 物件包含事件資訊，在函數內進行傳播。

範例2

下面範例為 button 物件系結一個單擊事件。在這個事件處理常式中，引數 e 為形參，響應事件之後，瀏覽器會把 event 物件作為一個實參進行傳遞，讀取 event 物件包含的事件資訊，在事件處理常式中輸出當前源物件節點名稱。

<button id="btn">按鈕</button>
<script>
    var button = document.getElementById("btn");
    button.onclick = function () {
        var e = e || window.event;  //獲取事件物件
        document.write(e.srcElement ? e.srcElement : e.target);  //獲取當前單擊物件的標簽名
    }
</script>

演示效果如下：

---