事件详解（事件委托）

qq_45783949

已于 2024-05-16 21:24:41 修改

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： javascript

于 2020-07-20 16:40:29 首次发布

本文链接：https://blog.csdn.net/qq_45783949/article/details/107466278

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件委托

一、点击标签显示文本内容
二、利用JS追加标签
三、事件委托

事件委托机制：利用事件冒泡的原理，把本应添加给某个元素上的事件委托给它的父级

一、点击标签显示文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				margin: 10px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			var aLi = document.getElementsByTagName("li");
			for(var i = 0; i<aLi.length; i++)
			{
				aLi[i].onclick = function(){
					console.log(this.innerHTML);
				}
				
			}
		</script>
	</body>
</html>

二、利用JS追加标签

注意：点击追加标签后并无响应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托机制：利用事件冒泡的原理，把本应添加给某个元素上的事件委托给它的父级</title>
		<style type="text/css">
			li{
				margin: 10px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			var oUl = document.getElementsByTagName("ul")[0]; 
			var aLi = document.getElementsByTagName("li");
			for(var i = 0; i<aLi.length; i++)
			{  //单击li标签 控制台打印出标签内容
				aLi[i].onclick = function(){
					console.log(this.innerHTML);
				}
			}
			
			//利用JS追加标签
			for(var i = 0; i < 5; i++){
				var oLi = document.createElement("li");//新建标签
				oLi.innerHTML = i;//向标签内添加内容
				oUl.appendChild(oLi);//追加内容
			}
		</script>
	</body>
</html>

三、事件委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托机制：利用事件冒泡的原理，把本应添加给某个元素上的事件委托给它的父级</title>
		<style type="text/css">
			li{
				margin: 10px;
				background-color: #7CCBE9;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			var oUl = document.getElementsByTagName("ul")[0]; 
			var aLi = document.getElementsByTagName("li");
			
			/* for(var i = 0; i<aLi.length; i++)
			{  //单击li标签 控制台打印出标签内容
				aLi[i].onclick = function(){
					console.log(this.innerHTML);
				}
			} */
			
			//事件委托
			//将单击事件委托给li的父级ul
			oUl.onclick = function(e){
				var evt = e || event;
				var _target = evt.target || evt.srcElement; //兼容性  获取事件源
				if(_target.nodeName.toLowerCase() == "li"){ //进行大小写转换  ==比较
					console.log(_target.innerHTML);
				}
			}
			
			//利用JS追加标签
			for(var i = 0; i < 5; i++){
				var oLi = document.createElement("li");//新建标签
				oLi.innerHTML = i;//向标签内添加内容
				oUl.appendChild(oLi);//追加内容
			}
		</script>
	</body>
</html>

qq_45783949

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
事件详解（事件委托）

事件委托一、点击标签显示文本内容二、利用JS追加标签三、事件委托**事件委托机制：利用事件冒泡的原理，把本应添加给某个元素上的事件委托给它的父级**一、点击标签显示文本内容<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li{ margin
复制链接

扫一扫