知识与语法整理笔记 js零基础快速学习教程( 三 )

那么一个函数是如何捕捉事件的呢，其实就像是一杯水,但是这杯水是分层次的,最底下是当前触发事件的物件。然后越往上范围越大，最顶层是window，倒数第二层是document 。气泡在上浮过程中会判断当前所到达的层有没有相应的函数或是处理方法。有话就执行相应的处理，没有的话就继续向上起泡，直到到达最顶层的window视窗层。我们可以在任何一层做相应的处理以阻止事件继续起泡，方法就是呼叫事件物件的阻止起泡的方法。以下是事件起泡的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sun</title > <script src="https://www.520longzhigu.com/diannao/js/jquery-1.4.3.js" type="text/javascript"></script> <script language="javascript"> $(document).ready(function(){$(' .one').click(function(e){alert('one');});$('.two').click(function(e){alert('two');});$('.three').click(function(e){alert('three');//阻止起泡取消下面的注释//e.stopPropagation();}); });</script> </head> <body> <div class="one" style= "width:200px;height:200px;background:green;"> one<div class="two" style="width:150px;height:150px;background:yellow;">two<div class="three">three</div></div> </div> </body> </html>一个事件起泡对应触发的是上层的同一事件，单击two的时候就会起泡触发one单击的事件，单击tree时,会同时触发two,然后触发one 。如果在click事件中，在你要处理的事件之前加上e.preventDefault()；那么就取消了行为(通俗理解：相当于做了个return操作)，不执行之后的语句了。e.stopPropagation()只要在click事件中，就不会触发上层click事件。结语希望这篇文章能够帮助你了解基本的JavaScript，如果想看更多内容，可以到快乐学程式的官网逛逛，相信可以在你学程式的路上有所帮助。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：