• event.target返回觸發(fā)事件的元素

• event.currentTarget返回綁定事件的元素

　　

1 <ul id="ul">ul2 <li>li<a href="">a</a></li>3 <li>li<a href="">a</a></li>4 <li>li<a href="">a</a></li>5 </ul>6 <script>7 var ul = document.getElementById("ul");8 ul.onclick = function(event){9 var tar = event.target; 10 var tagName = tar.nodeName.toLowerCase(); 11 console.log("你點(diǎn)擊了:"+tagName); 12 event.preventDefault(); 13 } 14 </script>

　　當(dāng)我點(diǎn)擊哪個(gè)元素時(shí)，event.target返回的是點(diǎn)擊的元素節(jié)點(diǎn)，我們可以用返回的節(jié)點(diǎn)使用一些DOM對(duì)象上的一些操作。這里event.preventDefault，是用來(lái)阻止點(diǎn)擊a默認(rèn)跳轉(zhuǎn)，刷新頁(yè)面導(dǎo)致結(jié)果不能輸出來(lái)的一個(gè)作用。

event.currentTarget的作用是什么呢，我覺(jué)得他和this 的作用是差不多的，始終返回的是綁定事件的元素

　　

1 <ul id="ul">ul2 <li>li<a href="">a</a></li>3 <li>li<a href="">a</a></li>4 <li>li<a href="">a</a></li>5 </ul>6 <script>7 var ul = document.getElementById("ul");8 ul.onclick = function(event){9 var tar = event.target; 10 var current = event.currentTarget; 11 var tagName = tar.nodeName.toLowerCase(); 12 console.log(tar == this); 13 event.preventDefault(); 14 } 15 </script>

實(shí)際使用中target的妙用：

　　target事件委托的定義：本來(lái)該自己干的事，但是自己不干，交給別人來(lái)干。比如上面的例子中，應(yīng)該是ul li a 來(lái)監(jiān)控自身的點(diǎn)擊事件，但是li a自己不監(jiān)控這個(gè)點(diǎn)擊事件了，全部交給li父節(jié)點(diǎn)和a祖父節(jié)點(diǎn)ul來(lái)監(jiān)控自己的點(diǎn)擊事件。一般用到for循環(huán)遍歷節(jié)點(diǎn)添加事件的時(shí)候都可以用事件委托來(lái)做，可以提高性能。

來(lái)個(gè)案例：一個(gè)添加刪除的demo。

1 　　<input type="text" id="text">2 <input type="button" value="添加" id="button">3 <ul>4 <li>第1個(gè)<button class="btn" id="1">刪除</button></li>5 <li>第2個(gè)<button class="btn" id="2">刪除</button></li>6 <li>第3個(gè)<button class="btn" id="3">刪除</button></li>7 </ul>8 <script>9 var button = document.getElementById("button"); 10 var text = document.getElementById("text"); 11 var ul = document.getElementsByTagName("ul")[0]; 12 var btnClass = document.getElementsByClassName("btn"); 13 button.onclick = function(){ 14 var deleteButton = document.createElement("button"); 15 var value = text.value; 16 deleteButton.setAttribute("class","btn"); 17 var deleteText = document.createTextNode("刪除"); 18 deleteButton.appendChild(deleteText); 19 var li = document.createElement("li"); 20 var liText = document.createTextNode(value); 21 li.appendChild(liText); 22 li.appendChild(deleteButton); 23 ul.appendChild(li); 24 for(var i=0;i<btnClass.length;i++){ 25 btnClass[i].οnclick=function(){ 26 this.parentNode.parentNode.removeChild(this.parentNode); 27 } 28 } 29 } 30 31 for(var i=0;i<btnClass.length;i++){ 32 btnClass[i].οnclick=function(){ 3334 this.parentNode.parentNode.removeChild(this.parentNode); 35 } 36 } 37 </script>

為什么在第24行也需要一個(gè)for循環(huán)，給每個(gè)刪除按鈕添加事件呢，因?yàn)橥饷娴膄or循環(huán)，在文檔刷新時(shí)給頁(yè)面中存在的三個(gè)刪除按鈕添加了點(diǎn)擊事件，而后來(lái)添加的刪除按鈕并沒(méi)有綁定事件，導(dǎo)致頁(yè)面中存在的三個(gè)li標(biāo)簽可以刪除，而后來(lái)新添加的li不能刪除這個(gè)問(wèn)題。我們使用事件委托來(lái)做就不用這么麻煩了

1 <script>2 var button = document.getElementById("button");3 var text = document.getElementById("text");4 var ul = document.getElementsByTagName("ul")[0];5 var btnClass = document.getElementsByClassName("btn"); 6 button.onclick = function(){7 var deleteButton = document.createElement("button"); 8 var value = text.value;9 deleteButton.setAttribute("class","btn"); 10 var deleteText = document.createTextNode("刪除"); 11 deleteButton.appendChild(deleteText); 12 var li = document.createElement("li"); 13 var liText = document.createTextNode(value); 14 li.appendChild(liText); 15 li.appendChild(deleteButton); 16 ul.appendChild(li); 17 } 18 ul.onclick = function(event){ 19 var tar = event.target; 20 if(tar.nodeName.toLowerCase() == "button"){ 21 tar.parentNode.parentNode.removeChild(tar.parentNode); 22 } 23 } 24 </script>

給ul添加了點(diǎn)擊事件，點(diǎn)擊ul里面的子元素，event.target都會(huì)返回當(dāng)前點(diǎn)擊的元素節(jié)點(diǎn)，做一個(gè)判斷，如果點(diǎn)擊了button標(biāo)簽，刪除這個(gè)li節(jié)點(diǎn)。由于添加的li都在ul節(jié)點(diǎn)里面，所以并不用再去添加li事件里面去寫(xiě)代碼了，是不是很方便呢。

轉(zhuǎn)載于:https://www.cnblogs.com/0828-li/p/8882071.html

總結(jié)

以上是生活随笔為你收集整理的target和currentTarget的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。