currentTarget与target区别

2018-11-1 01:36| 作者: admin| 查看: 106| 评论: 0|来自: 蚂蚁部落

标题中两个属性都属于事件对象。

有时它们两个返回值完全一样,所以具有一定的迷惑性。

下面将通过代码实例详细分析一下它们之间的区别与应用。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style type="text/css"> 
#ant{
  width:100px;
  height:60px;
  background-color:#ccc;
}
</style> 
<script> 
window.onload=function(){ 
  let obox = document.getElementById("ant");
  obox.onclick = function (ev) {
    console.log(event.target.id);
    console.log(event.currentTarget.id);
  } 
} 
</script> 
</head> 
<body> 
<div id="ant"></div> 
</body> 
</html>

点击div元素,然后在控制台查看运行效果。

代码内容截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/013704m2mbt5zmlmb92knq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击div元素之后,可以将两个属性返回元素的id属性值在控制台打印出来。

可以看到这两个元素返回值是完全一样的,如果总是一样,那么官方创建两个属性将毫无意义了。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style type="text/css"> 
#ant{
  width:100px;
  height:60px;
  background-color:#ccc;
}
#inner{
  width:50px;
  height:30px;
  background-color:blue;
}
</style> 
<script> 
window.onload=function(){ 
  let obox = document.getElementById("ant");
  let oinner=document.getElementById("inner");
  obox.onclick = function (ev) {
    console.clear();
    console.log(event.target.id);
    console.log(event.currentTarget.id);
  } 
} 
</script> 
</head> 
<body> 
<div id="ant">
  <div id="inner"></div>
</div> 
</body> 
</html>

上述代码点击不同的元素,在控制台打印出不同内容。

两个属性的区别也得以体现:

(1).点击外层div元素,控制台打印截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/013741im8pluala168u84y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).点击内部div元素,控制台打印截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/013807m3tt3zfqggampt3f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

首先给出两个属性的概念:

(1).currentTarget属性返回注册事件处理函数的元素。

(2).target属性返回触发事件处理函数的元素。

代码分析总结如下:

(1).注册事件处理函数的元素与触发事件的元素可能是同一个元素,就如点击外层元素。

(2).注册事件处理函数的元素也可能与触发事件的元素非同一元素,很多事件具有冒泡效果,比如上述代码,点击子元素会触发click事件,根据冒泡原理,事件向上传递到父div元素,并执行注册在其上的事件处理函数,所以点击子元素,target属性返回子元素,currentTarget属性返回当前处理该事件的元素,也就是注册事件处理函数的元素,外层div元素。

特别说明:上面介绍的都是原生JavaScript中的概念,很多库可能已经将其修改。

属性的使用案例

最常见的是利用事件冒泡来实现委托效果,所谓的委托,就是让自己的事情委托给别人办理。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
table {
  width: 300px;
  height: 60px;
  background-color: green;
}
table td {
  background-color: white;
}
</style>
<script>
window.onload=function(){
  let otable=document.getElementsByTagName("table")[0];
  let odiv=document.getElementsByTagName("div")[0];
  otable.onclick=function(ev){
    odiv.innerHTML=ev.target.innerHTML;
  }
}
</script>
</head>
<body>
<table cellspacing="1">
  <tr>
    <td>单元格一</td>
    <td>单元格二</td>
    <td>单元格三</td>
    <td>单元格四</td>
  </tr>
  <tr>
    <td>单元格五</td>
    <td>单元格六</td>
    <td>单元格七</td>
    <td>单元格八</td>
  </tr>
</table>
<div></div>
</body>
</html>

上述代码点击单元格,会将其中的内容写入div中。

代码分析如下:

(1).我们并没有将事件处理函数注册在每一个td之上,而是利用事件冒泡注册在table之上。

(2).好处很明显,性能比较好,代码也更为清爽,新添加的td元素具有同样的功能。

(3).利用target属性即可获取触发事件的元素,也就是我们点击的单元格,然后将其内容写入div。

上面就是委托,本来td单元格的活,交给table去做。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部