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
相關標籤/搜索
root+not+empty+target
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。