JavaScript事件綁定
JavaScript也稱ECMAScript，是一種動態類型、弱類型、基於原型的直譯式腳本語言；基於事件驅動，具有相對安全性並被廣泛應用於客戶端網頁開發和客戶端WEB開發。
最早是在HTML上使用的，用來給HTML網頁添加動態功能，由Netscape公司的Brendan Eich在網景導航者瀏覽器上首次設計實現而成。
設計JavaScript的主要目的是爲了解決瀏覽器與用戶交互的問題，爲用戶提供更好的瀏覽效果。因爲當時瀏覽器只能瀏覽網頁，無法與用戶互動。比如你登錄一個網站輸入完用戶名點擊提交的時候，瀏覽器並不知道你是否輸入了，也無法校驗，只能傳給服務器去校驗。由於網絡速度相當緩慢，只有28.2kbps，校驗步驟浪費的時間太多。於是Netscape公司在他們的網景導航者瀏覽器中嵌入了JavaScript，提供了數據校驗等基本功能。現在JavaScript也被用於網絡服務器，如Node.js。
一、JavaScript函數
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
JavaScript函數語法：
無參函數：
function functionname() {
// 要執行的代碼
}帶參函數（任意多的參數，參數之間用“,”分隔）：
function functionname() {
// 要執行的代碼
}可以在某事件發生時直接調用函數，也可由JavaScript在任意位置進行調用（必須在被調用函數聲明或引入之後的位置調用，否則瀏覽器將提示函數未定義的錯誤）。
函數可以返回任意類型的值，若函數末行沒有return語句，那麼函數默認返回undefined。
二、JavaScript綁定事件的三種方式
爲了使網站更好的與用戶進行交互，我們需要爲DOM元素綁定事件處理函數。所謂事件處理函數，就是用來處理用戶操作的函數，不同的操作對應不同的函數。
在JavaScript中，有三種常用的事件綁定的方法：
1.在DOM元素中直接綁定；
2.在JavaScript代碼中綁定；
3.綁定事件監聽函數。
一、在DOM元素中直接綁定
這裏的DOM元素可以理解爲HTML標籤。JavaScript支持在HTML標籤中直接綁定事件，語法如下：
onXX = "JavaScript Code";
其中：
onXX爲事件名稱。例如：鼠標單擊事件onclick、鼠標雙擊事件ondouble等。
JavaScript Code爲處理事件的JavaScript代碼，一般是函數。
例如，單擊一個按鈕，彈出一個警告框的代碼有如下兩種寫法
1.原生函數
<button οnclick="alert('警告框')">點擊我，彈出警告框</button>2.自定義函數
<button οnclick="myAlert()">點擊我，彈出警告框</button>
<script>
function myAlert() {
alert("警告框");
}
</script>二、在JavaScript代碼中綁定
在JavaScript代碼中（即<script>標籤或js文件內）綁定事件可以使JavaScript代碼與HTML分離、文檔結構清晰、便於管理和開發。
在JavaScript代碼中綁定事件，語法如下：
elementObject.onXX = function () {
// 事件處理代碼
}
其中：
elementObject爲DOM對象，即DOM元素。
onXX爲事件名稱。例如：鼠標單擊事件onclick、鼠標雙擊事件ondouble等。
例如，爲一個id="demo"的按鈕綁定一個onclick事件，顯示它的name屬性
1.匿名函數綁定
<button id="demo" name="button">點擊我，彈出name值</button>
<script>
document.getElementById("demo").onclick = function () {
alert(this.name);
}
</script><button id="demo" name="button">點擊我，彈出name值</button>
<script>
var demo = document.getElementById("demo");
function showName() {
alert(demo.name);
}
demo.onclick = showName();// 錯誤的綁定方式，這種方式是先調用一次showName函數，然後再將showName函數的返回值綁定給onclick事件，如果函數返回值是一個函數對象，那麼這個返回值就是onclick的事件處理函數；否則將忽略該返回值
demo.onclick = showName;// 正確的綁定方式，showName指向一個函數對象（一個函數句柄），與匿名函數（一個匿名函數即一個匿名函數對象）綁定效果相同。三、綁定事件監聽函數
綁定事件的另一種方法是用addEventListener() 或 attachEvent()來綁定事件監聽函數。
addEventListener()函數語法：
elementObject.addEventListener(eventName, handle, useCapture);
| 參數 | 說明 |
|---|---|
| elementObject | DOM對象（即DOM元素）。 |
| eventName | 事件名稱（注意：這裏的事件名稱沒有on，如鼠標點擊事件click）。 |
| handle | 事件句柄函數，即用來處理事件的函數。 |
| useCapture | Boolean類型，是否使用捕獲，一般用false，與事件流相關。 |
attachEvent()函數語法：
elementObject.attachEvent(eventName, handle);
| 參數 | 說明 |
|---|---|
| elementObject | DOM對象（即DOM元素）。 |
| eventName | 事件名稱（注意：這裏的事件名稱有on，如鼠標點擊事件onclick）。 |
| handle | 事件句柄函數，即用來處理事件的函數。 |
事件句柄函數是指“函數名”，不能帶小括號
addEventListener()是標準的綁定事件監聽函數的方法，是W3C所支持的，Chrome、Firefox、Opera、Safari、IE9及其以上版本都支持該函數；但是，IE8及其以下版本不支持改函數，它使用attacheEvent()來綁定事件監聽函數。所以，這種綁定方法，必須要處理瀏覽器兼容問題。
下面是綁定事件的代碼，進行了兼容性處理，能夠被所有瀏覽器支持：
function addEvent(eleObj, eventName, handle) {
if (eleObj.attachEvent) {// IE8及其以下版本
eleObj.attachEvent("on" + eventName, handle);
} else if (eleObj.addEventListener) {// Chrome、Firefox、Opera、Safari、IE9及其以上版本
eleObj.addEventListener(eventName, handle);
} else {// 早期版本
eleObj["on" + eventName] = handle;
}
}例如，爲一個id="demo"的按鈕，綁定一個onclick事件，彈出按鈕的name：
var demo = document.getElementById("demo");
function showName() {
alert(demo.name);
}
addEvent(demo, "click", showName);三、總結
在JavaScript中，有三種常用的事件綁定的方法：
1.在DOM元素中直接綁定；
2.在JavaScript代碼中綁定；
3.綁定事件監聽函數。
除了直接第一種直接在DOM元素中綁定函數外，其餘兩種綁定方法都是通過使用函數句柄或匿名函數進行綁定。使用函數句柄綁定事件函數時，如果函數返回值不是一個“函數對象”，那麼函數名後面一定不要帶有()，函數名後面跟上一對小括號表示執行該函數。
