currentTarget与target

时间 2019-11-25
标签 currenttarget target 繁體版
原文原文链接
  先看代码： 
 
 <!DOCTYPE html>   
 
 < 
 html 
 >   
 
 < 
 head 
 >   
 
 < 
 meta 
 charset 
 = 
 " utf-8" 
 >  
 
 < 
 title 
 >蚂蚁部落</ 
 title 
 >  
 
 < 
 style 
 type 
 = 
 "text/css" 
 >  
 
 #ant{ 
 
 width:100px; 
 
 height:60px; 
 
 } 
 
 #inner{ 
 
 width:50px; 
 
 height:30px; 
 
 } 
 
 </ 
 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 
 > 

上述代码点击不一样的元素，在控制台打印出不一样内容。css
两个属性的区别也得以体现：html
（1）.点击外层div元素，控制台打印截图以下：函数
（2）.点击内部div元素，控制台打印截图以下：性能
首先给出两个属性的概念：lua
（1）.currentTarget属性返回注册事件处理函数的元素。spa
（2）.target属性返回触发事件处理函数的元素。code
代码分析总结以下：htm
（1）.注册事件处理函数的元素与触发事件的元素多是同一个元素，就如点击外层元素。blog
（2）.注册事件处理函数的元素也可能与触发事件的元素非同一元素，不少事件具备冒泡效果，好比上述代码，点击子元素会触发click事件，根据冒泡原理，事件向上传递到父div元素，并执行注册在其上的事件处理函数，因此点击子元素，target属性返回子元素，currentTarget属性返回当前处理该事件的元素，也就是注册事件处理函数的元素，外层div元素。事件
特别说明：上面介绍的都是原生JavaScript中的概念，不少库可能已经将其修改。
属性的使用案例：
最多见的是利用事件冒泡来实现委托效果，所谓的委托，就是让本身的事情委托给别人办理。
代码实例以下：
 
  <!DOCTYPE html> 
 
  < 
  html 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset 
  = 
  " utf-8" 
  > 
 
  < 
  meta 
  name 
  = 
  "author" 
  content 
  = 
  "http://www.softwhy.com/" 
  /> 
 
  < 
  title 
  >蚂蚁部落</ 
  title 
  > 
 
  < 
  style 
  > 
 
  table { 
 
  width: 300px; 
 
  height: 60px; 
 
  } 
 
  table td { 
 
  } 
 
  </ 
  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去作。ul,li相似。
 
原文：http://www.softwhy.com/article-9489-1.html