js事件委托

最新推荐文章于 2024-09-18 14:33:27 发布

我要当极客

最新推荐文章于 2024-09-18 14:33:27 发布

阅读量97

点赞数

分类专栏：学习小记录

本文链接：https://blog.csdn.net/weixin_44089544/article/details/88928463

版权

学习小记录专栏收录该内容

21 篇文章 0 订阅

订阅专栏

作为一个面试经常问到的问题，我也是久仰大名- -，本以为是一个理论型的知识，但其实再工作中真的特别实用，项目中会不停的用到这个知识点。。网上的详解也是特别的多推荐一篇比较不错的文章：

事件委托

这篇文章囊括了大多的知识点，而且浅显易懂推荐大家好好阅读一下，如下代码（文章的最后）也帮助我在工作中解决了不小的问题。

　var oUl = document.getElementById('test');
    oUl.addEventListener('click',function(ev){
        var target = ev.target;
        while(target !== oUl ){
            if(target.tagName.toLowerCase() == 'li'){
                console.log('li click~');
                break;
            }
            target = target.parentNode;
        }
    })

还有可以利用事件委托来进行高级排他，再工作中也非常实用（点击一个元素后该元素添加class，其他兄弟元素删除class）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none;
            width: 100%;
        }

        li {
            background: #000;
            width: 100%;
            height: 30px;
            margin-top: 5px;

        }

        .current {
            background: red;
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var ul = document.querySelectorAll('ul')[0];
    ul.addEventListener('click', (e) => {
        var e = e || window.e;
        let target = e.target || e.srcElement;
        if (target.nodeName.toLowerCase() === 'li') {
            if (this.lastClick !== target) {
                target.className = 'current';

                if (this.lastClick) {
                    this.lastClick.className = '';
                }
                this.lastClick = target;
            } else {
                target.className === 'current' ? target.className = '' : target.className = 'current';
            }
        }
    })
    
</script>
</body>
</html>

这段代码解释一下就是。。写了半天感觉文字太生硬。。解释的不到位各位老哥自行理解吧 - 。-