事件委托及使用

最新推荐文章于 2024-07-26 11:09:07 发布

無你不歡

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量98

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64640332/article/details/126887102

版权

事件委托

<body>
    <ul>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
    </ul>
</body>
<script>
    //  例如商品列表，如果每个商品卡片都做一个点击事件，就会造成大量的dom操作，事件委托就是通过事件冒泡的原理，
    // 把点击事件都委托到父元素上再通过e.target获取触发事件的元素
    let ul = document.querySelector('ul')
    ul.addEventListener('click', (e) => {
        console.log(1111);
        // 通过e.target获取触发事件的元素
        console.log(e.target);
    }, true)
</script>