本文实例分析了JQuery中DOM事件冒泡。分享给大家供大家参考。具体分析如下：
什么是冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素上也绑定了click事件。
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素</div>
<script type="text/javascript">$(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); });})</script>当单击内部span元素，即触发span元素的click事件时，会输出3条记录。只单击内部span元素，就会触发外部div元素和body元素上绑定的click事件。这是由事件冒泡引起的。在单击span元素的同时，也单击了包含span元素的元素div和包含div元素的元素body，并且每一个元素都会按照特定的顺序响应click事件。
元素的click事件会按照以下顺序“冒泡”。
1. <span>
2. <div>
3. <body>
之所以称为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。
事件冒泡引发的问题
事件冒泡可能会引起预料之外的效果。上例中，本来只想触发<span>元素的click事件，然而<div>元素和<body>元素的click事件也同时被触发了。因此，有必要对事件的作用范围进行限制。当单击<span>元素时，只触发<span>元素的click事件，而不触发<div>元素和<body>元素的click事件：当单击<div>元素时，只触发<div>元素的click事件，而不触发<body>元素的click事件。
事件对象
由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题，JQuery进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。
在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery代码如下：
$("element").bind("click",function(event){ //event : 事件对象 //... });这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。
新闻热点
疑难解答
图片精选
