jQuery中DOM事件冒泡的实例分析
什么是泡沫
页面上可以有多个事件,多个元素可以响应同一事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素中,所有元素都绑定到单击事件,而体元素也绑定到单击事件。
外层的div元素
内跨度元
外层的div元素
$(函数(){())
对于跨元素绑定,单击 / 事件
$('span)。Bind(单击
VaR txt =美元(' #味精)。Html()+内跨元素被点击。
$(#味精)。Html(TXT);
});
对于div元素绑定,单击事件
$(#内容)Bind(单击。
VaR txt =美元(' #味精)。Html()+外层的div元素被点击。
$(#味精)。Html(TXT);
});
对于体元素绑定,单击事件
$()Bind(单击
VaR txt =美元(' #味精)。Html()+体元点。
$(#味精)。Html(TXT);
});
})
3记录输出时的内部跨元素被点击,即点击事件触发SPAN元素。只有内部跨元素被点击,和外部div元素和体元素绑定click事件被触发,这是由一个事件冒泡引起的。而点击SPAN元素,我们同时单击包含SPAN元素和含有div元素元素体元素div,每个元素应在一个特定的顺序单击事件。
该元素的单击事件冒泡的顺序。
一
二
三
它被称为气泡,因为这个事件会像泡沫一样按照DOM层次结构向上和向下移动。
事件泡沫引发的问题
事件冒泡可能造成意想不到的影响。在这个例子中,只是想触发该元素的单击事件,但元素和元素的单击事件也触发。因此,有必要限制事件的影响范围。当点击一个元素,它会触发该元素单击事件而触发的元素和元素的单击事件。当单击元素时,它只触发元素的单击事件,而不会触发元素的单击事件。
事件对象
因为ie-dom和标准的DOM实现事件对象的方法是不同的,这使得它很难在不同的浏览器获取事件对象。针对这一问题,jQuery已经做了必要的扩展和封装,便于获得事件对象和事件对象的一些属性在任何浏览器。
在程序中使用事件对象非常简单,只需向函数添加一个参数,jQuery代码如下所示:
$(元素)。Bind(单击
事件:事件对象
…
});
这样,当元素元素被单击时,就创建了事件对象。这个事件对象只能通过事件处理函数来访问。在执行事件处理函数之后,事件对象被销毁。
停止事件冒泡
停止事件冒泡可以防止事件处理函数中其他对象的事件被执行,里面()方法在jQuery停止事件冒泡。
$(函数(){())
对于跨元素绑定,单击 / 事件
$('span)。Bind(单击
VaR txt =美元(' #味精)。Html()+内跨度元点击;
$(#味精)。Html(TXT);
(事件。里面); / /停止事件
});
})
当元素被单击时,它只触发元素上的单击事件,并且不会触发元素和元素的单击事件。同样的方法可以用来解决元素上的气泡问题。
$(#内容)Bind(单击。
VaR txt =美元(' #味精)。Html()+外层的div元素被点击。
$(#味精)。Html(TXT);
(事件。里面); / /停止事件
});
这样,当元素或元素被单击时,它只输出相应的内容,而不输出其他内容。
防止违约行为
Web页面中的元素有自己的默认行为。例如,单击超链接后,它们将跳转,表单将在单击提交按钮后提交。有时,必须防止元素的默认行为。
在jQuery,preventDefault()方法是用来防止元素的默认行为。
例如,在项目中,经常需要验证表单,单击提交按钮,验证表单内容,比如是否需要一个元素字段,一个元素长度足够6,当表单提交不符合条件时,提交一个停止表单(默认行为)。
用户名 uff1a
$(函数(){())
$(#子)Bind(单击。
用户名= $(var#用户名)(。Val); / /获取的元素的值
如果(用户名){判断值为空
$(#味精)。Html(文本框的值不能为空。); / /消息
(事件。preventDefault); / /防止违约行为(提交)
}
})
})
当用户的名称为空,点击提交按钮的提示,和形式不能提交。只有当内容输入用户名可以形式提交。可以看出,preventDefault()方法可以防止表单提交的行为。
如果你想停止冒泡和违约行为对事件对象在同一时间,您可以返回到事件处理函数的错误。这是叫stopprapagation速记方式()方法和preventDefault()方法对事件对象的同时。
表格中的例子,event.preventdefault()可以改写为:返回false;
event.stoppropaqation()在沸腾的情况下也可以改写为:返回false;
事件捕获
事件捕获和事件冒泡是两个相反的过程,事件捕获始于流程的顶部。
一
二
三
很明显,事件捕获从最外层元素开始,然后进入最内层元素,因此绑定单击事件首先传递到元素,然后传递给元素,最后传递到元素。
不幸的是,并不是所有的主流浏览器都支持事件捕获,而这一缺陷不能由javascript.jquery非持续性事件捕获修复,如果读者需要使用事件捕获,请使用本地Javascript直接。
希望本文能对大家的jQuery程序设计有所帮助。