事件绑定和事件委托例子

最新推荐文章于 2025-05-24 13:13:15 发布

vip_guo

最新推荐文章于 2025-05-24 13:13:15 发布

阅读量452

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种通过事件委托的方法来优化DOM元素上绑定大量点击事件的技术方案。使用事件委托可以减少事件监听器的数量，提高网页性能。文章通过一个具体的HTML和JavaScript实例展示了如何为一组动态创建的列表项绑定点击事件，并利用事件冒泡原理实现事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="js-list"></ul>
    <script>
        //============================================
        (()=>{
            let List = document.getElementById('js-list');
            if(!List) {
                return;
            }
            for(let i = 0;i<3;i++){
                let Li = document.createElement('li');
                Li.innerHTML = i+1;
                List.append(Li);
                //事件绑定，但是数据多了 影响性能
                // Li.addEventListener('click',function () {
                //     alert(this.innerText);
                // })
            }
            // 这时候就要想到用事件委托方法来优化
            List.addEventListener('click',function (e) {
                if(e.target.tagName === 'LI'){
                    alert(e.target.innerHTML);
                }
                
            })
        })()
        //===========================================================
    
        
    </script>
</body>
</html>