关于JS中target属性的使用

首先先介绍一下target这个属性——触发事件的元素

定义和语法

//定义
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素
获取当前操作的事件源
//语法
event.target

event.type 当前事件类型
event.clientX/event.clientY 鼠标触发点距离可视区
event.pageX/event.pageY 鼠标触发点距离整个屏幕左上角的x/y轴坐标
event.offsetX/event.offsetY 鼠标鼠标触发点距离当前触发元素左上角的x/y轴坐标

小结：event.target可以理解为我们当下操作的这个对象，我们通过点击、键盘事件、change等等操作来触发target(理解深度不够 以后会继续完善)

可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素，直接使用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>

输出结果：

看到这里就能明白target会根据鼠标点击的元素来返回相应的数据，更快的获取该属性

最后，百度后找到相关属性，贴在这里

获取文本内容：tar.textContent
获取父级节点：tar.parentNode
获取节点名称：tar.nodeName
使用target获取到的节点名称全部为大写

还有CurrentTarget是绑定事件元素需要再做做功课，未完待续。。。