JavaScript 变乱冒泡简介及应用实例
|
副问题[/!--empirenews.page--]
一、什么是变乱冒泡 在一个工具上触发某类变乱（好比单击onclick变乱），假云云工具界说了此变乱的处理赏罚措施，那么此变乱就会挪用这个处理赏罚措施，假如没有界说此变乱处理赏罚措施可能变乱返回true，那么这个变乱会向这个工具的父级工具撒播，从里到外，直至它被处理赏罚（父级工具全部同类变乱都将被激活），可能它达到了工具条理的最顶层，即document工具（有些赏识器是window）。 打个例如说：你在处所法院要上诉一件案子，假如处所没有处理赏罚此类案件的法院，处所相干部分会帮你继承往上级法院上诉，好比从市级到省级，直至到中央法院，最终使你的案件得以处理赏罚。 二、变乱冒泡有什么浸染 （1）变乱冒泡应承多个操纵被齐集处理赏罚（把变乱处理赏罚器添加到一个父级元素上，停止把变乱处理赏罚器添加到多个子级元素上），它还可以让你在工具层的差异级别捕捉变乱。 【齐集处理赏罚例子】 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //本例子只在表面盒子界说了处理赏罚要领，而这个要领一样可以捕捉到子元素点击举动并处理赏罚它。假设有成千上万子元素要处理赏罚，莫非我们要为每个元素加“onclick="eventHandle(event)"”？显然没有这种齐集处理赏罚的要领来的简朴，同时它的机能也是更高的。 function eventHandle(e) { var e=e||window.event; var obj=e.target||e.srcElement; alert(obj.id+' was click') } </script> （2）让差异的工具同时捕捉统一变乱，并挪用本身的专属处理赏罚措施做本身的工作，就像老板一下呼吁，各自员工做本身岗亭上的事变去了。 【同时捕捉统一变乱例子】 Copy to Clipboard引用的内容：[www.veryhuo.com]
<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> function outSideWork() { alert('My name is outSide,I was working...'); } function inSideWork() { alert('My name is inSide,I was working...'); } //由于下面措施自动激活单击变乱，有些赏识器不应承，以是请单击灰色盒子，从这里开始下呼吁，这样由于冒泡的缘故起因，玄色大盒子也会收到单击变乱，并挪用了本身的处理赏罚措施。假如尚有更多盒子嵌套，一样原理。 /* function bossOrder() { document.getElmentById('inSide').click(); } bossOrder(); */ </script> 三、必要留意什么 ●变乱捕捉着实有三种方法，变乱冒泡只是个中的一种：（1）IE从里到外（inside→outside）的冒泡型变乱。（2）Netscape4.0从外到里（outside→inside）的捕捉型变乱。（3）DOM变乱流，先从外到里，再从里到外回到原点（outside→inside→outside）的变乱捕捉要领（好像工具将触发两次变乱处理赏罚，这有什么浸染？不才不懂！）。 ●不是全部的变乱都能冒泡。以下变乱不冒泡：blur、focus、load、unload。 ●变乱捕捉方法在差异赏识器，乃至同种赏识器的差异版本中是有所区此外。如Netscape4.0回收捕捉型变乱办理方案，其余大都赏识器则支持冒泡型变乱办理方案，其它DOM变乱流还支持文本节点变乱冒泡。 ●变乱捕捉达到顶层的方针在差异赏识器或差异赏识器版本也是有区此外。在IE6中HTML是吸取变乱冒泡的，其它大部门赏识器将冒泡连续到window工具，即……body→documen→window。 ●阻止冒泡并不能阻止工具默认举动。好比submit按钮被点击后会提交表单数据，这种举动无须我们写措施定制。 四、阻止变乱冒泡 凡是环境下我们都是一步到位，明晰本身的变乱触劈头，并不但愿赏识器自作智慧、漫无目标地去帮我们找吻合的变乱处理赏罚措施，即我们明晰最精准方针，这种环境下我们不必要变乱冒泡。其它通过对变乱冒泡的领略，我们知道措施将做多较多特另外工作，这肯定增大措施开销。尚有一个重要的题目是：变乱冒泡处理赏罚也许会激活我们原来不想激活的变乱，导致措施错杂，乃至无从动手调试，这常成为对变乱冒泡不认识措施员的棘手题目。以是须要时，我们要阻止变乱冒泡。 【不想激活的变乱被激活例子】 Copy to Clipboard引用的内容：[www.veryhuo.com]
<div onclick="openWin('http://www.baidu.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //本例你现实但愿点击灰色盒子打开google首页，而点击玄色盒子打开baidu首页，但功效你点击灰色盒子的时辰，却是同时打开了两个网页。着实在现实计划中较少碰着此题目，你也许会想假如我在页面差异DOM深处安放了差异的按钮或链接，深层处的变乱触发会不会波及顶层的按钮呢？不会，由于按钮不能形成嵌套相关。 function openWin(url) { window.open(url); } </script> 下面是本人在网上抄的一个要领，把这个要领放在精准方针工具处理赏罚措施末了，才干件触发处理赏罚竣事后，变乱将不在举办冒泡处理赏罚。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
