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

2021/9/24 23:13:09

编程Tag： js 事件 function alert click addEventListener document 24 09

本文主要是介绍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>

这篇关于JS事件冒泡、捕获、委托-2021-09-24的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章