<html>
<head>
<script src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var useCapture=false;
// Firefox
// 这里先要执行捕获阶段事件,然后再执行冒泡阶段事件。
// 执行顺序为:h1clicked capture -> span clicked -> span clicked capture -> h1 clicked
// 由于span是事件处理中心,所以在它上面的事件执行顺序将会按照注册的先后顺序来进行,所以这里发生在span上的click事件会先执行冒泡,然后执行捕获
$('h1').get(0).addEventListener("click",function(){alert('h1 clicked')},useCapture);
$('span').get(0).addEventListener("click",spanClick,useCapture);
$('h1').get(0).addEventListener("click",function(){alert('h1clicked capture')},true);
$('span').get(0).addEventListener("click",function(){alert('span clicked capture')},true);
// IE不支持捕获阶段,只支持冒泡阶段
//$('h1').click(function(){alert('h1clicked')});
//$('span').click(spanClick);
});
function spanClick()
{
alert('span clicked');
// IE中阻止冒泡
//var event= window.event;
//event.cancelBubble=true;
}
</script>
</head>
<body>
<h1><span>test5</span></h1>
</body>
</html>
JS中的冒泡与捕获
最新推荐文章于 2024-01-28 16:11:51 发布