JS事件冒泡、捕获、委托-2021-09-24

2021-09-24
学如逆水行舟,不进则退

事件冒泡 点击元素之后,事件从下往上触发
事件捕获 点击元素之后,事件从上往下触发

	<body>
		<div id="box1">
			<button type="button1" id="btn1">事件冒泡</button>
		</div>
		<div id="box2">
			<button type="button2" id="btn2">事件捕获</button>
		</div>
		<script type="text/javascript">
			//事件冒泡 先弹出btn再弹出box
			var box1=document.getElementById("box1"),
				btn1=document.getElementById("btn1");
			box1.addEventListener("click",function(){
				alert("我是box");
			});
			btn1.addEventListener("click",function(){
				alert("我是btn");
			});
			
			//事件捕获 先弹出box再弹出btn
			var box2=document.getElementById("box2"),
				btn2=document.getElementById("btn2");
			box2.addEventListener("click",function(){
				alert("我是box");
			},true);
			btn2.addEventListener("click",function(){
				alert("我是btn");
			},true);
		</script>
	</body>

事件委托 利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件

	<body>
		<ul id="parent">
			<li id="one">one</li>
			<li id="two">two</li>
			<li id="three">three</li>
		</ul>
		<script type="text/javascript">
			var parent=document.getElementById("parent");
			parent.addEventListener("click",function(event){
				if(event.target.id=="one"){
					alert("one");
				}else if(event.target.id=="two"){
					alert("two");
				}else if(event.target.id=="three"){
					alert("three");
				}
			});
		</script>
	</body>
上一篇:JavaScript(狂神说学习笔记)


下一篇:入口函数的区别