事件監視器,冒泡傳遞,捕獲傳遞的區別

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	</head>
	<body>
		
		<ul>
			<li>
				<button id="aa">aa</button>
			</li>
			<li>
				<button id="bb">bb</button>
			</li>
			<li>
				<button id="cc">cc</button>
			</li>
			<li id="li1"><p id="p1">冒泡傳遞</p></li>
			<li id="li2"><p id="p2">捕獲傳遞</p></li>
		</ul>
			<script>
			document.getElementById("aa").addEventListener("click",
			function()
				{
					alert("hello");
				});
				document.getElementById("bb").addEventListener("click",
			function()
				{
					alert("world");
				});
	document.getElementById("cc").addEventListener("click",
			function()
				{
					alert("abc");
				});
					document.getElementById("p1").addEventListener("click",
			function()
				{
					alert("p");
				},false);
				document.getElementById("li1").addEventListener("click",
			function()
				{
					alert("li");
				},false);
			
				document.getElementById("p2").addEventListener("click",
			function()
				{
					alert("p");
				},true);
					document.getElementById("li2").addEventListener("click",
			function()
				{
					alert("li");
				},true);
		</script>
	</body>
</html>

 

發佈了23 篇原創文章 · 獲贊 6 · 訪問量 3663
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章