JS中的冒泡与捕获

最新推荐文章于 2024-01-28 16:11:51 发布

diandian82

最新推荐文章于 2024-01-28 16:11:51 发布

阅读量1.3k

点赞数

分类专栏： Javascript 文章标签： function ie

本文链接：https://blog.csdn.net/diandian82/article/details/6975915

版权

Javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<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>

diandian82

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的冒泡与捕获

$(document).ready(function () { var useCapture=false; // Firefox // 这里先要执行捕获阶段事件，然后再执行冒泡阶段事件。 // 执行顺序为：h1clicked capture -> span clicked -> span clicked capture -> h1 clicked // 由于span是事件处理中
复制链接

扫一扫

专栏目录