手写JS 实现事件委托

 <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
 </ul>
let ul = document.querySelector('#list');

ul.addEventListener('click', function(e){
    let target = e.target;

    while( target.tagName !== 'LI' ){
           if ( target.tagName === 'UL' ){
                target = null;
                break;
           }

           target = target.parentNode;
    }

    if ( target ){
        console.log('你点击了ui里的li')
    }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript与HTML之间的交互是通过事件实现的。在学习事件委托之前,我们需要先了解事件绑定、事件监听、事...
    chiang24阅读 7,464评论 1 2
  • 很多人是在使用事件委托的,那对于一个使用者来说,只要能正确的使用好事件委托,完成工作,就算可以了,那么你有认真的考...
    饥人谷_enzo阅读 338评论 0 2
  • 事件委托的原理:单击到按钮上,冒泡到div上,判断当前单击的元素是不是BUTTON,是,则执行下面的函数即使另一个...
    从前慢pearl阅读 374评论 0 0
  • 为什么要用事件委托? 首先,需要了解一下常用的事件监听方法有哪些区别: 常用的监听方法的区别 通常,在页面中监听事...
    这名字真不对阅读 1,045评论 1 3
  • 美国石油大王洛克菲勒: 应付人的能力也是可以购买的一种商品,正如糖或咖啡一样, 而我愿意会付酬购买这种能力,他比世...
    天赐賓阅读 235评论 0 0