JS中target属性的使用

最近学习了target属性，是真的强大，可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素，直接使用target点击就可获取。
接下来说说target哪里强大。
先看看target是什么意思
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
我认为target事件就是会自动判断我们点的是哪个元素，我给大家举个简单的例子

    <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;
            //判断我们点击的节点名是否和li相等，如果相等，则提示我们
            if(tar.nodeName==='LI'){
                console.log("你刚刚点击了我");
                //打印我们点击的节点和节点内容
                console.log(tar);
            }else{
                console.log('你没有点击我');
            }
        }
    </script>

当我们的鼠标点击第一个li时，会提示“你刚刚点击了我”，并打印<li>今天6.11</li>

1.png

当我们的鼠标点击第二个li时，会提示“你刚刚点击了我”，并打印<li>今天6.12</li>

2.jpg

当我们的鼠标点击第三个li时，会提示“你刚刚点击了我”，并打印<li>今天6.13</li>

3.jpg

还有各个属性，说几个比较常用的
获取文本内容：tar.textContent
获取父级节点：tar.parentNode
获取节点名称：tar.nodeName
需要注意，使用target获取到的节点名称全部为大写

这就是他的强大的地方，会根据我们鼠标点击的元素来返回相应的数据，帮助我们更快的获取该属性，感兴趣的朋友可以试试。