event.target和event.CurrentTarget的区别专业解释

绝地灬酷狼 2024-04-17 05:34 12阅读 0赞

## 区别 ##

Use event.currentTarget instead of event.target because of event bubbling/capturing:

*  event.currentTarget- is the element that has the event listener attached to.
 *  event.target- is the element that triggered the event.

尽可能使用event.currentTarget获取事件点击元素，而不是event.target

*  event.currentTarget- 监听事件绑定的元素
 *  event.target- 触发事件的元素。事件可能冒泡到父元素，随意触发事件的可能是父元素。

## 测试代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    		<style>
    			#parent {
    				background-color: red;
    				width: 250px;
    				height: 220px;
    			}
    		
    			#child {
    				background-color: yellow;
    				height: 120px;
    				width: 120px;
    				margin: 0 auto;
    			}
    		
    			#grand-child {
    				background-color: blue;
    				height: 50px;
    				width: 50px;
    				margin: 0 auto;
    			}		
    			#msg,
    			#jQmsg,
    			#arrmsg {
    				font-size: 16px;
    				font-weight: 600;
    				background-color: #eee;
    				font-family: sans-serif;
    				color: navy;
    			}
    			</style>
    				
    	</head>
    	<body>
    		<div id="parent">Parent-(attached event handler)<br><br>
    			<div id="child"> Child<br><br>
    			  <p id="grand-child">Grand Child</p>
    			</div>
    		</div>	
    		<div id="msg"></div><br>
    		<div id="jQmsg"></div><br>
    		<div id="arrmsg"></div>			
    	</body>
    	<script type="text/javascript">
    		(function() {
    			var parent = document.getElementById('parent');
    				parent.addEventListener('click', function(e) {
    			  
    				document.getElementById('msg').innerHTML = "this: " + this.id +
    				"<br> currentTarget: " + e.currentTarget.id +
    				"<br>target: " + e.target.id;
    				});
    				$('#parent').on('click', function(e) {
    				$('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
    							   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
    							   + "<br>target: " + $(e.target).prop('id'));
    				});
    				$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));
    		})();
    	</script>
    
    	</html>

## 测试结果 ##

case1:点击grand child  
target: 触发事件的是parent.  
currentTarget:绑定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

## case2 ##

点击黄色child。  
1 target 触发元素chilid  
2 currenttarget 是parent  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/814021da9e1c4ed3bcc618afad3897c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/b1decdc17e6142d78133b1d0b2c54d96.png