深入理解jQuery中的事件冒泡

1.什么是冒泡？

例如：

！DOCTYPE html html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8'/title事件冒泡/title脚本src=' http:/./js/jquery 1 . 11 . 1 . js/script script type=' text/JavaScript ' $(function(){///)。绑定点击事件$(“span”)。bind ('click '，function () {vartxt=$ ('# msg ')。html()“p单击了内部span元素/p”；$('#msg ')。html(txt)；});//绑定点击事件$ ('# content ')。bind ('click '，function () {var txt=$ ('# msg ')。html()“Pouter div元素被单击/p”；$('#msg ')。html(txt)；});//为span元素绑定click事件$(“body”)。Bind ('click '，function () {var txt=$ ('# msg ')。html()“p正文元素已被单击/p”；$('#msg ')。html(txt)；});});/script/headbody div id='content '外部div元素span内部span元素/span/div id=' msg '/div/body/html当您单击'内部span元素'时，即当span元素的click事件被触发时，将输出3条记录。

那就是：

单击内部跨度元素。

单击外部div元素。

单击主体元素。

这是由事件的冒泡引起的。

2.冒泡事件引发的问题。

01.事件对象。

要在程序中使用事件对象，只需向函数添加一个参数。jQuery代码如下：

$(“元素”)。bind ('click '，function(event){//event : event object })；02.停止事件冒泡。

在jQuery中，提供了一个stopPropagation()方法来停止事件冒泡。

以span元素绑定click事件为例：

//绑定点击事件$(“span”)。Bind ('click '，function(event){//event : event object vartxt=$(' # msg ')。html()“p单击了内部span元素/p”；$('#msg ')。html(txt)；event . stopperpagation()；//停止事件冒泡})；点击“内跨元素”时，即触发跨元素的点击事件时，只输出一条记录。

那就是：

单击内部跨度元素。

这解决了冒泡问题。

3.防止默认行为。

网页中的元素有自己的默认行为，比如点击超链接后会跳转，点击提交后会提交表单。有时，有必要防止元素的默认行为。

在jQuery中，提供了preventDefault()方法来防止元素的默认行为。

以输入提交为例。

！DOCTYPE html html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title/title脚本src='http:/./js/jquery 1 . 11 . 1 . js/script脚本类型=' text/JavaScript ' $(function(){ $(' # sub ')。bind('click '，function(event){ var username=$(' # username ')。val()；//获取元素if的值(username=='') {//判断是否为空alert('文本框的值不能为空')；//提示消息event . preventdefault()；//防止默认行为(表单提交)} })；});/script/headbody表单操作='/' username : input type=' text ' id=' username '/input type=' sub '提交'值=' sub ' id=' sub '/form/body/html如果不输入内容，可以阻止默认行为(表单提交)。

总结：如果您想同时停止事件的冒泡和默认行为，可以在事件处理程序中返回false。这是同时在事件对象上调用stopPropagation()方法和preventDefault()方法的简写。

在上面表单的示例中，您可以将。

event . preventdefault()；//阻止默认行为(表单提交)。

覆盖为：返回false

您也可以在事件中冒泡事件. stopperpagation()；//停止事件冒泡。

覆盖为：返回false

04.事件捕获。

05.事件对象的属性。

有关活动属性的详细信息，请参考：http://www.w3school.com.cn/jsref/dom_obj_event.asp。

以上对jQuery中事件冒泡的深入理解是边肖与大家分享的全部内容。希望能给大家一个参考，多支持我们。