原生js面试题：event对象中的target，currentTarget的区别，以及应用_事件委托

深碍√TFBOYSˉ_ 2022-05-17 05:38 229阅读 0赞

## 一、    event对象中的target，currentTarget的区别 ##

在使用event对象时，event对象有两个属性target和currentTarget，这两属性都代表事件源，由于事件冒泡和捕获（如果想知道事件冒泡和事件捕获请[点击][Link 1]）的原因，会出现直接的事件源（发生事件的DOM元素）和当前事件源（经过冒泡或者捕获后，触发的父级对应事件的事件源）。

1）、target：而直接的事件源（真正的事件源）是target。

2）、currentTarget：经过冒泡或者捕获触发的父级的DOM元素是currentTarget。冒泡到哪个父元素，那么currentTarget就是哪个父元素。

3）、this：在事件处理函数中，this就是currentTarget。

以下代码经过运行，在谷歌浏览器中的控制台就可以打印的内容，根据打印的内容就知道target和currentTarget分别是谁了？

看看如下示例代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#grandpaDiv{
    				width:400px;
    				height:400px;
    				background-color:red;
    			}	
    			#fatherDiv{
    				width:300px;
    				height:300px;
    				background-color:yellow;
    			}	
    			#meDiv{
    				width:200px;
    				height:200px;
    				background-color:pink;
    			}	
    		</style>
    	</head>
    	<body>
    		<div id="grandpaDiv">
    			<div id="fatherDiv">
    				<div id="meDiv">
    				</div>
    			</div>
    		</div>
    		
    	</body>
    </html>
    <script type="text/javascript">
    
    function $(id){
    	return document.getElementById(id);
    }
    
    //target:真正的事件源，不会因为冒泡或者捕获而改变
    //currentTarget:当前事件源，冒泡冒到（捕获捕到）哪个元素，就是哪个元素
    
    window.onload = function(){
    
    
    	$("grandpaDiv").addEventListener("click",function(event){
    		var evt = event || window.event;
    		console.log("爷爷被点了");
    		console.log("currentTarget:",evt.currentTarget);
    		console.log("target:",evt.target);
    		
    	},false);
    	
    	$("fatherDiv").addEventListener("click",function(event){
    		var evt = event || window.event;
    		console.log("爸爸被点了");
    		console.log("currentTarget:",evt.currentTarget);
    		console.log("target:",evt.target);
    	},false);
    	
    	$("meDiv").addEventListener("click",function(event){
    		var evt = event || window.event;
    		console.log("我被点了");
    		console.log("currentTarget:",evt.currentTarget);
    		console.log("target:",evt.target);
    	},false);
    
    }
    </script>

## 二、应用\_事件委托 ##

事件委托：把本该属于某个DOM对象的事件，委托给它的父（级）元素。这样做的好处是：对于动态添加的元素，事件依然会有效。

如：在<ul>标签下有若干个<li>标签，如果希望给每个<li>标签增加一个onclick事件，而且希望，动态添加<li>元素后，新添加的<li>标签依然有onclick事件，就可以使用事件委托。

事件委托中需要使用到event对象的target属性。

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    	*{
    		margin:0;
    		padding:0;
    	}
    	ul{
    		list-style:none;
    		position:absolute;
    		left:100px;
    		top:100px;
    		width:200px;
    		border:1px solid black;
    	}
    	
    </style>
    </head>
    <body>
    	<ul id="menuBox">
    		<li>收藏本网站</li>
    		<li>qq聊天</li>
    		<li>微信聊天</li>
    		<li>网页聊天</li>
    	</ul>
    	<input id="btnAdd" type="button" value="添加一个li" />
    </body>
    </html>
    <script type="text/javascript" src="js/eventTools.js"></script>
    <script type="text/javascript">
    function $(id){
    	return document.getElementById(id);
    }
    
    //事件委托：
    //把本该属于某个DOM对象的事件，委托给它的父（级）元素。
    
    window.onload = function(){
    	//使用事件委托，把本该属于li的onclick事件，委托它的父元素ul
    	//使用事件冒泡的特性，点击子元素，就会触发父元素的点击事件。
    	$("menuBox").onclick = function(event){
    		var evt = event || window.event;
    		if(evt.target.tagName.toLowerCase()=="li"){//只针对li元素进行处理
    			alert(evt.target.innerHTML);
    		}
    	}
    	
    	//以下为动态添加li标签
    	var ord = 4;
    	$("btnAdd").onclick = function(){
    		ord++;
    		var liObj = document.createElement("li");
    		liObj.innerHTML = "第"+ord+"个li";
    		$("menuBox").appendChild(liObj);
    	}	
    }
    
    </script>

[Link 1]: https://blog.csdn.net/jiang7701037/article/details/81481550