jQuery进修4：赏识器的变乱模子

发布时间：2018-08-17 10:35:51 所属栏目：业界来源：站长网

导读：起主要知道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/

（编辑：河北网）

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

全新iPad Pro已在途中	RGB三色光源直接成像！
零下30℃开启中国中车	首发价 1199 元，小米