Event.target与event.currentTarget

小咪咪 2023-10-05 22:38 41阅读 0赞

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

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

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

练习：利用事件委托，实现导航栏切换

![1b321ca4480443ad8095145be8cf9f7f.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul {
                display: flex;
                flex-flow: row;
                justify-content: space-around;
                width: 500px;
                background-color: aquamarine;
            }
    
            li {
                padding: 5px 25px;
            }
    
            .on {
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div>
        <ul>
            <li class="on">测试1</li>
            <li>测试2</li>
            <li>测试3</li>
        </ul>
    </div>
    <script>
        let ul = document.getElementsByTagName("ul")
        ul[0].addEventListener('click', ulDom, false);
    
        function ulDom(event) {
            let list = event.currentTarget.children;
            let demo1 = event.target;
            //进行判断，否则点击ul时，li全都会添加class
            if (demo1.localName == 'li') {
                for (let i = 0; i < list.length; i++) {
                    list[i].className = '';
                }
                event.target.className = 'on';
            }
        }
    </script>
    </body>
    </html>

[1b321ca4480443ad8095145be8cf9f7f.png]: https://img-blog.csdnimg.cn/1b321ca4480443ad8095145be8cf9f7f.png