相信大家都知道在web中為元素綁定事件有多種方式，并且都會使用，然而大家可能不理解各種綁定事件方式的本質(zhì)和所有特性；了解這些本質(zhì)和特性是很有必要的，因為它能減少我們的代碼量和出錯率，具體內(nèi)容如下：（若想更深入地理解JavaScript的各種特性，可以參考另一篇文章：《JavaScript的發(fā)現(xiàn)與理解》）
目錄
內(nèi)容
事件處理程序的名字以on開頭，緊接個事件的名字，如：click事件的事件處理程序名字為onclick；
為事件指定處理程序的方式有好幾種：
方式1. 對象的事件屬性
格式為：
對象.事件屬性 = 事件處理函數(shù);
示例：
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//處理事件
}
這種添加方式有以下特點：
- 事件處理程序是作為對象的方法來運行的，所以事件處理程序中this的值是相應(yīng)的對象；
- 事件處理程序會在事件流的冒泡階段被調(diào)用；
- 通過給對象的事件屬性設(shè)置null來移除事件；
- 只能同時指定一個事件處理程序；
- 只能把事件處理程序添加到冒泡階段；
- 使用 對象的事件屬性（方式1） 和 HTML的事件標(biāo)簽屬性（方式3）這兩種方式對 同一個元素 添加的事件處理器，只會最后一次設(shè)置的有效；因為 HTML的事件標(biāo)簽屬性的方式（方式3） 最終也是通過 對象的事件屬性的方式（方式1） 來添加事件處理器的；
- 如果事件處理程序返回假值
return false;，則會阻止此事件的相關(guān)默認(rèn)操作，即：相當(dāng)于調(diào)用事件對象event的preventDefault()方法；
方式2. 元素的addEventListener方法
這種方式是通過元素的addEventListener方法添加事件處理程序，通過元素的removeEventListener方法移除事件；
所有DOM節(jié)點中都包含addEventListener和removeEventListener這2個實例方法，這2個方法的描述如下：
addEventListener方法：
語法：
element.addEventListener(event, function, useCapture)
參數(shù)值：
event：必須。字符串，指定事件名。
注意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
function：必須。指定要事件觸發(fā)時執(zhí)行的函數(shù)。
當(dāng)事件對象會作為第一個參數(shù)傳入函數(shù)。 事件對象的類型取決于特定的事件。例如， "click" 事件屬于 MouseEvent(鼠標(biāo)事件) 對象。
useCapture：可選。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。true - 事件句柄在捕獲階段執(zhí)行
false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行；
示例：
var btn = document.getElementById(“myBtn”);
btn.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
removeEventListener方法：
語法：
element.removeEventListener(event, function, useCapture)
參數(shù)值：
event：必須。要移除的事件名稱。
注意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
function：必須。指定要移除的函數(shù)。
useCapture：可選。布爾值，可選。布爾值，指定移除事件句柄的階段。
true - 在捕獲階段移除事件句柄；
false- 默認(rèn)。在冒泡階段移除事件句柄；
注意: 如果添加兩次事件句柄，一次在捕獲階段，一次在冒泡階段，你必須單獨移除該事件。
示例：
// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
這種添加方式有以下特點：
- 可以添加多個處理事件；
- 通過addEventListener添加的事件處理程序，必須通過removeEventListener才能移除；
- 即可以把事件處理程序添加到捕獲階段，又可以添加到冒泡階段；
- 事件處理程序中this的值是被添加的元素對象；
- 不能通過事件處理程序返回假值
return false;來會阻止此事件的相關(guān)默認(rèn)操作；
方式3. HTML的事件標(biāo)簽屬性
格式為：
<標(biāo)簽名 事件處理程序名="JavaScript代碼">
通過這種方式指定的事件處理代碼（相應(yīng)事件處理程序的標(biāo)簽屬性（簡稱：事件標(biāo)簽屬性）的值，如：“JavaScript代碼”）會被放在一個函數(shù)環(huán)境中去執(zhí)行；具體實現(xiàn)機制如下：
通過事件的標(biāo)簽屬性指定事件的實現(xiàn)要機制：
- 瀏覽器會為相應(yīng)事件動態(tài)地創(chuàng)建一個函數(shù)作為相應(yīng)事件的事件處理函數(shù)，并把該函數(shù)通過對象的事件屬性的方式設(shè)置給了當(dāng)前元素dom對象上對應(yīng)的事件處理器屬性上，該函數(shù)如下：
dom對象.事件屬性 = function (event) { with (document){ with (this){ //元素的事件標(biāo)簽屬性的值會在這里被當(dāng)作JavaScript代碼來執(zhí)行； eval(事件標(biāo)簽屬性的值); } } }- 這個動態(tài)創(chuàng)建的事件處理函數(shù)中有一個入?yún)ⅲ?
event，用來接收事件對象；- 事件標(biāo)簽屬性的值會被當(dāng)作JavaScript代碼在這個動態(tài)創(chuàng)建的事件處理程序中運行：
- 這個動態(tài)創(chuàng)建的事件處理函數(shù)內(nèi)部使用
with將document和this對象擴展了成當(dāng)前的作用域?qū)ο螅?document和this的所有屬性都可以在當(dāng)前作用域里直接通過屬性名字作為變量來直接訪問；
通過這個實現(xiàn)機制，可知：
通過事件的標(biāo)簽屬性指定事件的方式有以下特點：
- 事件標(biāo)簽屬性的值會被當(dāng)作JavaScript代碼在這個動態(tài)創(chuàng)建的事件處理程序中運行；
- 使用 對象的事件屬性（方式1） 和 HTML的事件標(biāo)簽屬性（方式3）這兩種方式對 同一個元素 添加的事件處理器，只會最后一次設(shè)置的有效；因為 HTML的事件標(biāo)簽屬性的方式（方式3） 最終也是通過 對象的事件屬性的方式（方式1） 來添加事件處理器的；
- 這個動態(tài)創(chuàng)建的事件處理函數(shù)中的tihs值是事件的目標(biāo)元素；事件標(biāo)簽屬性的JavaScript代碼中被調(diào)用的函數(shù)的this值是 window 對象；
- 在事件標(biāo)簽屬性的值的JavaScript代碼中，可以直接訪問 保存事件對象的變量
event、綁定當(dāng)前事件的dom元素this，也可以通過document對象 和 綁定當(dāng)前事件的dom對象 的任意屬性名字作為變量名來直接訪問；如：<input onclick="clickHandler(event,this,cookie,value)">，其中cookie是document對象的屬性，value是 input元素的Dom對象的屬性；- 只能把事件處理程序添加到冒泡階段；
- 在事件標(biāo)簽屬性的值中可以通過返回假值
return false;來阻止此事件的相關(guān)默認(rèn)操作，即：相當(dāng)于調(diào)用事件對象event的preventDefault()方法；
