jQuery学习4：浏览器的事件模型

发布时间：2018-08-13 18:17:55 所属栏目：业界来源：站长网

导读：首先要知道DOM的两级模式：DOM0级和DOM2级在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。声明DOM第0级事件处理程序： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtdhtmlheadtitleD

首先要知道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.veryhuo.com/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.veryhuo.com/liehuo.net/images/liehuo2009/logo.gif" onclick="say('Vroom vroom!')"/> <div id="console"></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</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.veryhuo.com/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.veryhuo.com/liehuo.net/images/liehuo2009/logo.gif"/> </div> </div> <div id="console"></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</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.veryhuo.com/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.veryhuo.com/liehuo.net/images/liehuo2009/logo.gif"/> <div id="console"></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

以上代码简单说明我们能在同一个元素上为同一个事件类型建立多个事件处理程序。

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

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

壹号本新款 ONE XPLAY	特斯拉前 CTO 电动汽车
华硕公布新款天选3 搭	主流显卡最新场批价曝