JQuery中DOM事件冒泡实例分析

这篇文章主要介绍了JQuery中DOM事件冒泡用法,实例分析了事件冒泡的原理与阻止冒泡的方法,需要的朋友可以参考下

本文实例分析了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的层次结构像水泡一样不断向上直至顶端。

事件冒泡引发的问题

事件冒泡可能会引起预料之外的效果。上例中，本来只想触发元素的click事件，然而

元素和

元素的click事件也同时被触发了。因此，有必要对事件的作用范围进行限制。当单击元素时，只触发元素的click事件，而不触发

元素和

上一篇：JQuery中DOM加载与事件执行实例分析

下一篇：JQuery中DOM事件合成用法实例分析