您當前位置：首頁 > web前端 > jquery > jQuery學習4：瀏覽器的事件模型

jQuery學習4：瀏覽器的事件模型

來源：程序員人生發布時間：2014-03-12 17:32:25 閱讀次數：3785次

首先要知道DOM的兩級模式：DOM0級和DOM2級

在DOM0級事件處理程序是通過把函數實例的引用指派到DOM元素的屬性而聲明的。

聲明DOM第0級事件處理程序：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>DOM Level 0 Events Example - Liehuo.Net</title><script type="text/javascript" src="http://www.vxbq.cn/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript">$(function(){$('#vstar')[0].onmouseover = function(event) {say('Whee!');}});function say(text) {$('#console').append('<div>'+new Date()+' '+text+'</div>');}</script></head><body><img id="vstar" src="http://www.vxbq.cn/liehuo.net/images/liehuo2009/logo.gif" onclick="say('Vroom vroom!')"/><div id="console"></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

事件冒泡：在目標元素獲得機會處理事件之后，事件模型檢查目標元素的父元素，看是否為同類型事件建立了處理程序。如果是，則也調用父元素的處理程序。再檢查其父元素，直至檢查到DOM樹的頂部，這個過程稱之為事件冒泡。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html id="greatgreatgrandpa"><head><title>DOM Level 0 Bubbling Example - Liehuo.Net</title><script type="text/javascript" src="http://www.vxbq.cn/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript">$(function(){$('*').each(function(){var current = this;this.onclick = function(event) {if (!event) event = window.event;var target = (event.target) ?event.target : event.srcElement;say('For ' + current.tagName + '#'+ current.id +' target is ' + target.id);}});});function say(text) {$('#console').append('<div>'+text+'</div>');}</script></head><body id="greatgrandpa"><div id="grandpa"><div id="pops">用鼠標點擊下面的圖片<br /><img id="vstar" src="http://www.vxbq.cn/liehuo.net/images/liehuo2009/logo.gif"/></div></div><div id="console"></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

DOM第2級事件模型

DOM第0級的缺點是，屬性被用于存儲作為事件處理程序的函數的引用，所以每個元素對于任何特定的事件類型，每次只能注冊一個事件處理程序。

DOM第2級事件模型（也稱為監聽器）被設計來解決這些類型的問題。每個DOM元素都定義名為addEventListener()的方法，用于把事件處理程序(監聽器)附加到元素上。這個方法的格式如下所示：

addEventListener(enentType,listener,useCapture)

參數eventType是一個字符串，用于標識將要處理的時間類型。例如：click、mouseover、keydown等。

參數listener是函數的引用（或內聯函數），用于在元素上建立指定類型的處理程序。

參數useCapture是布爾類型。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>DOM Level 2 Events Example - Liehuo.Net</title><script type="text/javascript" src="http://www.vxbq.cn/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript">$(function(){var element = $('#vstar')[0];element.addEventListener('click',function(event) {say('Whee once!');},false);element.addEventListener('click',function(event) {say('Whee twice!');},false);element.addEventListener('click',function(event) {say('Whee three times!');},false);});function say(text) {$('#console').append('<div>'+text+'</div>');}</script></head><body>用鼠標猛擊網LOGO。<br /><img id="vstar" src="http://www.vxbq.cn/liehuo.net/images/liehuo2009/logo.gif"/><div id="console"></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

以上代碼簡單說明我們能在同一個元素上為同一個事件類型建立多個事件處理程序。

作者博客：http://www.cnblogs.com/yangzhijia/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 致中小站長-像自己的孩子樣運營一個網站

下一篇 站長心得：淺談友情連接的十個妙招

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

jQuery學習4：瀏覽器的事件模型