event.target 獲取的是觸發事件的標簽元素
event.currentTarget 獲取到的是發起事件的標簽元素
一、事件屬性:event.target
target事件委托的定義：本來該自己干的事，但是自己不干，交給別人來干
例子1
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 #main { 9 width: 200px; 10 height: 100px; 11 background: red; 12 } 13 </style> 14 <script type="text/javascript"> 15 window.onload = function() { 16 document.getElementById("main").onclick = function(e) { 17 /*這里e等於window.event也可以寫成event.*/ 18 console.log(e.target); //<div id="main" class="sb js node"><span>我愛JavaScript</span></div> 19 console.log(e.target.id); //main 返回點擊元素里存在的id屬性值 20 console.log(e.target.tagName); //DIV 21 console.log(e.target.nodeName); //DIV 22 console.log(e.target.classList); //輸出dom類列表,沒有即空 23 console.log(e.target.className); // sb js node 24 console.log(e.target.innerHTML); //<span>我愛JavaScript</span> 25 console.log(e.target.innerText); //我愛JavaScript 26 27 console.log("----------------------------------------------------") 28 29 console.log(e.type); //獲取事件類型：click 30 console.log(event.pageX+":"+event.pageY); //鼠標相對於文件的左側和頂部邊緣的位置 31 console.log(event.target); //獲取發起事件的標簽 32 console.log(event.currentTarget); //獲取發起事件的標簽 33 console.log(event.currentTarget.id); //獲取發起事件的標簽里的id屬性值 34 console.log(event.which) //針對鍵盤和鼠標事件，這個屬性能確定你到底按的是哪個鍵或按鈕 常用在keydown事件中 35 console.log(event.timeStamp); //事件觸發與事件創建之間的時間間隔 36 alert("點擊了id為："+event.target.id+"的"+event.target.nodeName+"標簽"); 37 38 // console.log(e.preventDefault()); //阻止默認事件 39 // console.log(e.stopPropagation()); //阻止事件冒泡到父元素 40 } 41 } 42 </script> 43 </head> 44 45 <body> 46 <div id="main" class="js node"><span>我愛JavaScript</span></div> 47 </body> 48 49 </html>
輸出如下：
tip:給網頁里ID為main的div標簽綁定了一個鼠標點擊事件，而在實際中，在點擊了這個div內的所有子標簽時，都會觸發這個事件，這個過程就是“冒泡”
例子中的事件傳播順序：
- 在冒泡型事件流中，是span> div > body > html > document。
- 在捕獲型事件流中，是document > html > body> div > span。
例子2：一個添加刪除的demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一個增刪demo</title> </head> <body> <input type="text" id="text"> <input type="button" value="添加" id="button"> <ul> <li>第1個<button class="btn" id="1">刪除</button></li> <li>第2個<button class="btn" id="2">刪除</button></li> <li>第3個<button class="btn" id="3">刪除</button></li> </ul> <script> var button = document.getElementById("button"); var text = document.getElementById("text"); var ul = document.getElementsByTagName("ul")[0]; var btnClass = document.getElementsByClassName("btn"); button.onclick = function(){ var deleteButton = document.createElement("button"); var value = text.value; deleteButton.setAttribute("class","btn"); var deleteText = document.createTextNode("刪除"); deleteButton.appendChild(deleteText); var li = document.createElement("li"); var liText = document.createTextNode(value); li.appendChild(liText); li.appendChild(deleteButton); ul.appendChild(li); for(var i=0;i<btnClass.length;i++){ btnClass[i].onclick=function(){ this.parentNode.parentNode.removeChild(this.parentNode); } } } for(var i=0;i<btnClass.length;i++){ btnClass[i].onclick=function(){ this.parentNode.parentNode.removeChild(this.parentNode); } } </script> </body> </html>
效果如下：
二、currentTarget
event.currentTarget的作用是什么呢，我覺得他和this 的作用是差不多的，始終返回的是綁定事件的元素
例子1
<body> <ul id="ul">ul <li>li<a href="">a</a></li> <li>li<a href="">a</a></li> <li>li<a href="">a</a></li> </ul> <script> var ul = document.getElementById("ul"); ul.onclick = function(event){ var tar = event.target; var current = event.currentTarget; //使用target感覺也沒有太大區別，具體鑒定需要多去嘗試不同的demo var tagName = tar.nodeName.toLowerCase(); console.log(tar == this); event.preventDefault(); } </script> </body>
效果
資料參考：https://www.cnblogs.com/sxz2008/p/6393232.html