用HTML写一个冒泡事件,如何处理“JS中的冒泡事件”

“冒泡事件”在平时项目中经常会遇到，比如我们想做一个日历层弹框效果，点击按钮，日历层弹出，然后点击日历其他地方，日历关闭，但是点击日立层上的空白区域不会关闭(特殊加了选中日历关闭层的事件除外)，此时，我们就应该要用到冒泡事件。简单的说，冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。当然，如想更加全面的了解下，首先得学习下“事件冒泡”的具体定义：

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身(可能)并没有处理事件的能力，即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件)，或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

理论知识说得再多，还不如来个具体的案例，这样大家会学习得更快，走起，走起！

我们一起来看个简单的案例：

HTML：

外层div元素

内层span元素

外层div元素

对应的jQuery代码如下：

$(function(){

// 为span元素绑定click事件

$('span').bind("click",function(){

var txt = $('#msg').html() + "

内层span元素被点击.

$('#msg').html(txt);// 设置html信息

});

// 为div元素绑定click事件

$('#content').bind("click",function(){

var txt = $('#msg').html() + "

外层div元素被点击.

$('#msg').html(txt);

});

// 为body元素绑定click事件

$("body").bind("click",function(){

var txt = $('#msg').html() + "

body元素被点击.

$('#msg').html(txt);

});

})

当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢？

修改如下：

$(function(){

// 为span元素绑定click事件

$('span').bind("click",function(event){

var txt = $('#msg').html() + "

内层span元素被点击.

$('#msg').html(txt);

event.stopPropagation();  // 阻止事件冒泡

});

// 为div元素绑定click事件

$('#content').bind("click",function(event){

var txt = $('#msg').html() + "

外层div元素被点击.

$('#msg').html(txt);

event.stopPropagation();  // 阻止事件冒泡

});

// 为body元素绑定click事件

$("body").bind("click",function(){

var txt = $('#msg').html() + "

body元素被点击.

$('#msg').html(txt);

});

})

event.stopPropagation(); // 阻止事件冒泡

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

下面是案例：

$(function(){

$("#sub").bind("click",function(event){

var username = $("#username").val(); //获取元素的值，val() 方法返回或设置被选元素的值。

if(username==""){   //判断值是否为空

$("#msg").html("

文本框的值不能为空.

"); //提示信息

event.preventDefault(); //阻止默认行为 ( 表单提交 )

}

})

})

html部分：

用户名：

还有一种防止默认行为的方法就是return false。效果一样。

代码如下：

$(function(){

$("#sub").bind("click",function(event){

var username = $("#username").val(); //获取元素的值

if(username==""){   //判断值是否为空

$("#msg").html("

文本框的值不能为空.

"); //提示信息

return false;

}

})

})

同理，上面的冒泡事件也可以通过return false来处理。

$(function(){

// 为span元素绑定click事件

$('span').bind("click",function(event){

var txt = $('#msg').html() + "

内层span元素被点击.

$('#msg').html(txt);

return false;

});

// 为div元素绑定click事件

$('#content').bind("click",function(event){

var txt = $('#msg').html() + "

外层div元素被点击.

$('#msg').html(txt);

return false;

});

// 为body元素绑定click事件

$("body").bind("click",function(){

var txt = $('#msg').html() + "

body元素被点击.

$('#msg').html(txt);

});

})

总结

看完上面的内容，是不是感觉“冒泡事件“也就那么回事，没我们想象中的那么难；有些知识，当你没接触过的时候，发现有多么多么的难，其实不然，所以我们应该要多去尝试新的技术，避免被淘汰。