js事件中的event默认参数，会返回target和currentTarget来获取当前的事件触发对象，两者的区别：
event.currentTarget：指的是绑定了事件监听的元素
event.target：指的是真正触发事件的元素节点
其中，event.target经常使用的属性如下：
1 | event.target.innerHTML // 获取事件触发元素的内容 标签+text |
2 | event.target.className // 获取事件触发元素的class名 "demo" |
3 | event.target.children // 获取事件触发元素的子节点 HTMLCollection(3) [li, li, li] |
4 | event.target.nodeName // 获取事件触发元素的HTML标签名 "li" |
5 | event.target.localName // 获取事件触发元素的HTML标签名 "li" |
试用案例，利用事件委托，实现导航栏切换：
1、html代码
1 | <ul> |
2 | <li class="on">测试1</li> |
3 | <li>测试2</li> |
4 | <li>测试3</li> |
5 | </ul> |
2、js代码
01 | let ul = document.getElementsByTagName("ul") |
02 | ul[0].addEventListener('click', clickFn, false) |
03 | function clickFn(event) { |
04 | let list = event.currentTarget.children |
05 | let demo1 = event.target |
06 | // 将所有的li的on去掉，再单独给当前点击的li加上on |
07 | if (demo1.localName === 'li') { |
08 | for (let i = 0; i < list.length; i++) { |
09 | list[i].className = '' |
10 | } |
11 | event.target.className = 'on' |
12 | } |
13 | } |
3、最终效果：
