最近學(xué)習(xí)了target屬性,是真的強(qiáng)大,可以不使用for()循環(huán)或者數(shù)組forEach()去判斷我點(diǎn)擊或者我需要找的是哪個(gè)元素,直接使用target點(diǎn)擊就可獲取。
接下來(lái)說說target哪里強(qiáng)大。
先看看target是什么意思
target 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)(觸發(fā)該事件的節(jié)點(diǎn)),如生成事件的元素、文檔或窗口。
我認(rèn)為target事件就是會(huì)自動(dòng)判斷我們點(diǎn)的是哪個(gè)元素,我給大家舉個(gè)簡(jiǎn)單的例子
<ul>
<li>今天6.11</li>
<li>明天6.12</li>
<li>后天6.13</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul');
ul[0].onclick = function (e) {
var event = e || window.event;
var tar = event.target || event.srcElement;
//判斷我們點(diǎn)擊的節(jié)點(diǎn)名是否和li相等,如果相等,則提示我們
if(tar.nodeName==='LI'){
console.log("你剛剛點(diǎn)擊了我");
//打印我們點(diǎn)擊的節(jié)點(diǎn)和節(jié)點(diǎn)內(nèi)容
console.log(tar);
}else{
console.log('你沒有點(diǎn)擊我');
}
}
</script>
當(dāng)我們的鼠標(biāo)點(diǎn)擊第一個(gè)li時(shí),會(huì)提示“你剛剛點(diǎn)擊了我”,并打印<li>今天6.11</li>

當(dāng)我們的鼠標(biāo)點(diǎn)擊第二個(gè)li時(shí),會(huì)提示“你剛剛點(diǎn)擊了我”,并打印<li>今天6.12</li>

當(dāng)我們的鼠標(biāo)點(diǎn)擊第三個(gè)li時(shí),會(huì)提示“你剛剛點(diǎn)擊了我”,并打印<li>今天6.13</li>

還有各個(gè)屬性,說幾個(gè)比較常用的
獲取文本內(nèi)容:tar.textContent
獲取父級(jí)節(jié)點(diǎn):tar.parentNode
獲取節(jié)點(diǎn)名稱:tar.nodeName
需要注意,使用target獲取到的節(jié)點(diǎn)名稱全部為大寫
這就是他的強(qiáng)大的地方,會(huì)根據(jù)我們鼠標(biāo)點(diǎn)擊的元素來(lái)返回相應(yīng)的數(shù)據(jù),幫助我們更快的獲取該屬性,感興趣的朋友可以試試。