js event.target与event.currentTarget的区别及用法

js事件中的event默认参数，会返回target和currentTarget来获取当前的事件触发对象，两者的区别：

event.currentTarget：指的是绑定了事件监听的元素

event.target：指的是真正触发事件的元素节点

其中，event.target经常使用的属性如下：

event.target.innerHTML　 // 获取事件触发元素的内容         标签+text
event.target.className   // 获取事件触发元素的class名          "demo"
event.target.children    // 获取事件触发元素的子节点    HTMLCollection(3) [li, li, li]
event.target.nodeName    // 获取事件触发元素的HTML标签名       "li"  
event.target.localName   // 获取事件触发元素的HTML标签名       "li"

试用案例，利用事件委托，实现导航栏切换：

1、html代码

<ul>
    <li class="on">测试1</li>
    <li>测试2</li>
    <li>测试3</li>
</ul>

2、js代码

let ul = document.getElementsByTagName("ul")
ul[0].addEventListener('click', clickFn, false)
function clickFn(event) {
    let list = event.currentTarget.children
    let demo1 = event.target
    // 将所有的li的on去掉，再单独给当前点击的li加上on
    if (demo1.localName === 'li') {
        for (let i = 0; i < list.length; i++) {
            list[i].className = ''
        }
        event.target.className = 'on'
    }
}

3、最终效果：