在各種瀏覽器中存在三種事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有瀏覽器所支持,而DOM2中所定義的事件模型目前被除了IE以外的所有主流瀏覽器支持.

1.原始事件模型

其事件類型:分為"輸入事件(如onclicki)"和"語義事件(如onsubmit)"

事件程序的注冊可以以下幾種方式:?
???????? 1、JS代碼作為HTML性質值

<input type="button" value="Press me" οnclick="alert('thanks');"

2、事件處理程序作為JS屬性

? 附注：文檔中的每個HTML元素在文檔樹中都有一個相應的JS對象，這個JS對象的屬性對應于那個HTML元素的性質，無論作為HTML性質的JS代碼還是作為JS屬性的時間處理程序，其本身的屬性都是函數"function".

<form name="f1">?
<input name="b1" type="button" value="Press Me"/>?
</form>

第一種賦值方式:

document.f1.b1.οnclick=function(){alert('thanks');};

第二種賦值方式:

function plead(){window.status="Please Press Me!";}?
document.f1.bi.οnmοuseοver=plead;

作為JS屬性的事件處理程序可以用JS屬性顯式調用

document.myfrom.onsubmit();

事件處理程序可以返回fale來阻止瀏覽器執行事件的默認動作，常用的如對onsubmit的操作。例外是?
對超鏈接mouseover的window.status顯示事件的阻擋，是返回true.例如:

<a href="help.htm" οnmοuseοver="window.status='help';return true;">help</a>

2.DOM2事件模型

這個模型參考了IE的氣泡模型而制定的,它是由w3c制定的規范.在原始模型中事件一旦發生就直接調用事件句柄,沒有其它的事件傳播過程.而在DOM2模型中事件有一個特殊的傳播過程,分為三個階段:?
(1)capturing phase:事件被從document一直向下傳播到目標元素,在這過程中如果有哪個祖先元素對該事件感興趣可以注冊自己的處理函數.?
(2)target phase:事件到達目標元素,執行目標元素的事件處理函數.?
(3)bubbling phase:事件從目標元素上升一直到達document,雖然所有的事件類型都會經歷captruing phase階段但是只有部分事件會經歷bubbling phase階段,例如submit事件就不會被上浮.?
在整個的事件傳播過程中可以調用event.stopPropagation()來停止事件的傳播,調用preventDefault()來阻止瀏覽器的默認行為.

addEventListener("eventType","handler","true!false");

removeEventListner("eventType","handler","true!false");

3.IE模型

IE模型也提供了一個event對象封裝了事件的詳細信息,但是IE不把該對象傳入事件處理函數,由于在任意時刻只會存在一個事件,所以IE把它作為全局對象window的一個屬性,IE中的事件傳播模式對應于DOM2的第二和第三階段,首先執目標元素的處理函數,然后向上傳播到達document,ie中只能能捕捉鼠標事件,而DOM2中可以捕捉所有的事件,IE中注冊和刪除事件處理函數的方法也不同于DOM2.

事件處理函數的注冊和刪除是通過元素的attachEvent( "eventType","handler") and detachEvent("eventType","handler" ),與dom2不同的是eventType有on前綴

IE與非IE瀏覽器在事件綁定的執行順序問題

JavaScript代理

JavaScript基礎講解[七]_事件模型

JS事件模型小結

?

參考資料：?JavaScript 博客園??

???????????????JavaScript 百度貼吧

解決 IE7 下 window.status 不顯示的問題

<a href="#" οnmοuseοver="window.status='立即刷新對話區內容，默認為每12秒刷新一次。';return true;" οnmοuseοut="window.status='';return true;" target='f1'>help</a>

具體的方法：打開IE7，在“工具—〉Internet 選項—〉安全—〉選中Internet”，點擊“自定義級別”，在“允許狀態欄通過腳本更新”中選擇“啟用”就行了。

IE6下不用設置，默認是可以的。

而FF下window.status 默認情況下是不能修改的

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript--事件模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。