js事件委托

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

事件委托

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

 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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值