javascript
JavaScript与HTML交互——事件
JavaScript和HTML的交互是通過事件實現(xiàn)的。JavaScript采用異步事件驅(qū)動編程模型，當(dāng)文檔、瀏覽器、元素或與之相關(guān)對象發(fā)生特定事情時，瀏覽器會產(chǎn)生事件。如果JavaScript關(guān)注特定類型事件，那么它可以注冊當(dāng)這類事件發(fā)生時要調(diào)用的句柄。
事件流
事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div，點擊了內(nèi)層的div，這時候是內(nèi)層的div先出發(fā)click事件還是外層先觸發(fā)？目前主要有三種模型
IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
Netscape的事件捕獲：不太具體的節(jié)點更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會，然后是實際目標(biāo)接收事件，最后是冒泡句階段。
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡
如有以下html，點擊div區(qū)域
<!DOCTYPE html > <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>Test Page</title> </head> <body><div>Click Here</div> </body> </html>| 事件冒泡模型 | 事件捕獲模型 | DOM事件流 |
?
事件處理程序（handler）
我們也稱之為事件偵聽器（listener），事件就是用戶或瀏覽器自身執(zhí)行的某種動作。比如click、load、moseover等，都是事件類型（俗稱事件名稱），而響應(yīng)某個事件的方法就叫做事件處理程序或者事件監(jiān)聽器或者事件句柄，事件處理程序名字是：on+事件類型。
了解了這些，我們看看如何給元素添加事件處理程序
HTML事件處理程序元素支持的每個事件都可以使用一個相應(yīng)事件處理程序同名的HTML屬性指定。這個屬性的值應(yīng)該是可以執(zhí)行的JavaScript代碼，我們可以為一個button添加 click事件處理程序
<input type="button" value="Click Here" onclick="alert('Clicked!');" />在HTML事件處理程序中可以包含要執(zhí)行的具體動作，也可以調(diào)用在頁面其它地方定義的腳本,剛才的例子可以寫成這樣
<input type="button" value="Click Here" onclick="showMessage();" /><script type="text/javascript">function showMessage() {alert('Clicked!');}在HTML中指定事件處理程序書寫很方便，但是有兩個缺點。
首先，存在加載順序問題，如果事件處理程序在html代碼之后加載，用戶可能在事件處理程序還未加載完成時就點擊按鈕之類的觸發(fā)事件，存在時間差問題。
其次，這樣書寫html代碼和JavaScript代碼緊密耦合，維護(hù)不方便。
JavaScript指定事件處理程序通過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序?qū)傩?。每個元素都有自己的事件處理程序?qū)傩?#xff0c;這些屬性名稱通常為小寫，如onclick等，將這些屬性的值設(shè)置為一個方法，就可以指定事件處理程序，如下
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript">var btnClick = document.getElementById('btnClick');btnClick.onclick = function showMessage() {alert(this.id);};</script>這樣處理，事件處理程序被認(rèn)為是元素的方法，事件處理程序在元素的作用域下運行，this就是當(dāng)前元素，所以點擊button結(jié)果是：btnClick
這樣還有一個好處，我們可以刪除事件處理程序，只需把元素的onclick屬性賦為null即可
DOM2事件處理程序DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：addEventListener和removeEventListener。所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：事件類型、事件處理方法、一個布爾值。最后布爾參數(shù)如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理。
剛才的例子我們可以這樣寫
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript">var btnClick = document.getElementById('btnClick');btnClick.addEventListener('click', function() {alert(this.id);}, false);</script>上面代碼為button添加了click事件的處理程序，在冒泡階段觸發(fā)，與上一種方法一樣，這個程序也是在元素的作用域下運行，不過有一個好處，我們可以為click事件添加多個處理程序
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript">var btnClick = document.getElementById('btnClick');btnClick.addEventListener('click', function() {alert(this.id);}, false);btnClick.addEventListener('click', function() {alert('Hello!');}, false);</script>這樣兩個事件處理程序會在用戶點擊button后按照添加順序依次執(zhí)行。
通過addEventListener添加的事件處理程序只能通過removeEventListener移除，移除時參數(shù)與添加的時候相同，這就意味著剛才我們添加的匿名函數(shù)無法移除，因為匿名函數(shù)雖然方法體一樣，但是句柄卻不相同，所以當(dāng)我們有移除事件處理程序的時候可以這樣寫
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript">var btnClick = document.getElementById('btnClick');var handler=function() {alert(this.id);}btnClick.addEventListener('click', handler, false);btnClick.removeEventListener('click', handler, false);</script>下面就是老生常談的IE兼容性問題了。。。
IE并不支持addEventListener和removeEventListener方法，而是實現(xiàn)了兩個類似的方法attachEvent和detachEvent，這兩個方法都接收兩個相同的參數(shù)，事件處理程序名稱和事件處理程序方法，由于IE指支持事件冒泡，所以添加的程序會被添加到冒泡階段。
使用attachEvent添加事件處理程序可以如下
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript">var btnClick = document.getElementById('btnClick');var handler=function() {alert(this.id);}btnClick.attachEvent( 'onclick' , handler);</script>結(jié)果是undefined，很奇怪，一會兒我們會介紹到
使用attachEvent添加的事件處理程序可以通過detachEvent移除，條件也是相同的參數(shù)，匿名函數(shù)不能被移除。
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript">var btnClick = document.getElementById('btnClick');var handler=function() {alert(this.id);}btnClick.attachEvent('onclick', handler);btnClick.detachEvent('onclick', handler);</script>跨瀏覽器的事件處理程序
前面內(nèi)容我們可以看到，在不同的瀏覽器下，添加和移除事件處理程序方式不相同，要想寫出跨瀏覽器的事件處理程序，首先我們要了解不同的瀏覽器下處理事件處理程序的區(qū)別
在添加事件處理程序事addEventListener和attachEvent主要有幾個區(qū)別
1. 參數(shù)個數(shù)不相同，這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
2. 第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
3. 事件處理程序的作用域不相同，addEventListener得作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行，this是window，所以剛才例子才會返回undefined，而不是元素id
4. 為一個事件添加多個事件處理程序時，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
?
了解了這四點區(qū)別后我們可以嘗試寫一個瀏覽器兼容性比較好的添加事件處理程序方法
function addEvent(node, type, handler) {if (!node) return false;if (node.addEventListener) {node.addEventListener(type, handler, false);return true;}else if (node.attachEvent) {node.attachEvent('on' + type, handler, );return true;}return false;}這樣，首先我們解決了第一個問題參數(shù)個數(shù)不同，現(xiàn)在三個參數(shù)，采用事件冒泡階段觸發(fā)，第二個問題也得以解決，如果是IE，我們給type添加上on，第四個問題目前還沒有解決方案，需要用戶自己注意，一般情況下，大家也不會添加很多事件處理程序，試試這個方法感覺很不錯，但是我們沒有解決第三個問題，由于處理程序作用域不同，如果handler內(nèi)有this之類操作，那么就會出錯在IE下，實際上大多數(shù)函數(shù)都會有this操作。
function addEvent(node, type, handler) {if (!node) return false;if (node.addEventListener) {node.addEventListener(type, handler, false);return true;}else if (node.attachEvent) {node.attachEvent('on' + type, function() { handler.apply(node); });return true;}return false;}這樣處理就可以解決this的問題了，但是新的問題又來了，我們這樣等于添加了一個匿名的事件處理程序，無法用detachEvent取消事件處理程序，有很多解決方案，我們可以借鑒大師的處理方式，jQuery創(chuàng)始人John Resig是這樣做的
function addEvent(node, type, handler) {if (!node) return false;if (node.addEventListener) {node.addEventListener(type, handler, false);return true;}else if (node.attachEvent) {node['e' + type + handler] = handler;node[type + handler] = function() {node['e' + type + handler](window.event);};node.attachEvent('on' + type, node[type + handler]);return true;}return false;}在取消事件處理程序的時候
function removeEvent(node, type, handler) {if (!node) return false;if (node.removeEventListener) {node.removeEventListener(type, handler, false);return true;}else if (node.detachEvent) {node.detachEvent('on' + type, node[type + handler]);node[type + handler] = null;}return false;}John Resig很巧妙地利用了閉包，看起來很不錯。
事件對象
在觸發(fā)DOM上的某個事件的時候會產(chǎn)生一個事件對象event，這個對象包含著所有與事件有關(guān)的信息，包括產(chǎn)生事件的元素、事件類型等相關(guān)信息。所有瀏覽都支持event對象，但支持方式不同。
DOM中的事件對象兼容DOM的瀏覽器會產(chǎn)生一個event對象傳入事件處理程序中。應(yīng)用一下剛才我們寫的addEvent方法
var btnClick = document.getElementById('btnClick');addEvent(btnClick, 'click', handler);點擊button的時候我們可以看到彈出內(nèi)容是click的彈窗
event對象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法，觸發(fā)事件的類型不同，可用的屬性和方法也不同，但是所有事件都會包含
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
| bubbles | Boolean | 只讀 | 事件是否冒泡 |
| cancelable | Boolean | 只讀 | 是否可以取消事件的默認(rèn)行為 |
| currentTarget | Element | 只讀 | 事件處理程序當(dāng)前處理元素 |
| detail | Integer | 只讀 | 與事件相關(guān)細(xì)節(jié)信息 |
| eventPhase | Integer | 只讀 | 事件處理程序階段：1 捕獲階段，2 處于目標(biāo)階段，3 冒泡階段 |
| preventDefault() | Function | 只讀 | 取消事件默認(rèn)行為 |
| stopPropagation() | Function | 只讀 | 取消事件進(jìn)一步捕獲或冒泡 |
| target | Element | 只讀 | 事件的目標(biāo)元素 |
| type | String | 只讀 | 被觸發(fā)的事件類型 |
| view | AbstractView | 只讀 | 與事件關(guān)聯(lián)的抽象視圖，等同于發(fā)生事件的window對象 |
在事件處理程序內(nèi)部，this始終等同于currentTarget，而target是事件的實際目標(biāo)。
要阻止事件的默認(rèn)行為，可以使用preventDefault（）方法，前提是cancelable值為true，比如我們可以阻止鏈接導(dǎo)航這一默認(rèn)行為
document.getElementsByTagName('a').onclick = function (e) {e.preventDefault();}stopPaopagation()方法可以停止事件在DOM層次的傳播，即取消進(jìn)一步的事件捕獲或冒泡。我們可以在button的事件處理程序中調(diào)用stopPropagation（）從而避免注冊在body上的事件發(fā)生
var handler = function (e) {alert(e.type);e.stopPropagation();}addEvent(document.body, 'click', function () { alert('Clicked body')});var btnClick = document.getElementById('btnClick');addEvent(btnClick, 'click', handler);若是注釋掉e.stopPropagation(); 在點擊button的時候，由于事件冒泡，body的click事件也會觸發(fā)，但是調(diào)用這句后，事件會停止傳播。
IE中的事件對象訪問IE中的event對象有幾種不同的方式，取決于指定事件處理程序的方法。直接為DOM元素添加事件處理程序時，event對象作為window對象的一個屬性存在
var handler = function () {var e = window.event;alert(e.type);}var btnClick = document.getElementById('btnClick');btnClick.onclick = handler;我們通過window.event取得了event對象，并檢測到了其類型，可是如果事件處理程序是通過attachEvent添加的，那么就會有一個event對象被傳入事件處理程序中
var handler = function (e) {alert(e.type);}var btnClick = document.getElementById('btnClick');attachEvent(btnClick, handler);當(dāng)然這時候也可以通過window對象訪問event，方便起見，我們一般會傳入event對象，IE中所有的事件都包含以下屬性方法
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
| cancelBulle | Boolean | 讀/寫 | 默認(rèn)為false，設(shè)置為true后可以取消事件冒泡 |
| returnValue | Boolean | 讀/寫 | 默認(rèn)為true，設(shè)為false可以取消事件默認(rèn)行為 |
| srcElement | Element | 只讀 | 事件的目標(biāo)元素 |
| type | String | 只讀 | 被觸發(fā)的事件類型 |
雖然DOM和IE的event對象不同，但基于它們的相似性，我們還是可以寫出跨瀏覽器的事件對象方案
function getEvent(e) {return e || window.event;}function getTarget(e) {return e.target || e.scrElement;}function preventDefault(e) {if (e.preventDefault)e.preventDefault();elsee.returnValue = false;}function stopPropagation(e) {if (e.stopPropagation)e.stopPropagation();elsee.cancelBubble = true;}?
常用HTML事件
有一些HTML事件我們會經(jīng)常用到，這些事件不一定與用戶操作有關(guān)，這里只是簡單提及，詳細(xì)用法大家就得百度谷歌了
總結(jié)
以上是生活随笔為你收集整理的JavaScript与HTML交互——事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H3C交换机设置DHCP中继，配合Lin
- 下一篇： 超棒的视差滚动效果javascript类