[JavaScript]什么是事件代理？

原创于 2020-08-17 21:34:09 发布 · 505 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

112 篇文章

订阅专栏

前端面试题

67 篇文章

订阅专栏

事件代理，也称作事件委托，是JavaScript中一种有效的事件处理方式。它利用事件冒泡的特性，将原本需要在每个子元素上绑定的事件处理函数委托到父元素上，从而减少内存消耗和提高效率。通过实例，本文将解释事件代理的工作原理和应用场景。

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

事件代理,又称之为事件委托,是JS中绑定事件的常用技巧,顾名思义,事件代理就是把原本需要绑定在子元素上的事件委托给父元素,事件代理的原理是冒泡机制。下面我来举个例子:


<body>

    <button id="btn">添加按钮</button>
    
    <ul id="uls">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <script>
    var lis = document.getElementsByTagName("li"),
        btn = document.getElementById("btn"),
        uls = document.getElementById("uls");
    
    btn.onclick = function(){
        var len = lis.length;
        var li = document.createElement("li");
        li.innerHTML = len;
        uls.appendChild(li);
    }
    
    uls.onclick = function(e){
        var e = window.event || e;
        var tar = e.target || e.srcElement;
        if(tar.nodeName=='LI'){//注意这里要大写
            tar.style.background='red';
        }
    
    }
    //本身是给li添加事件，现在委托在ul身上
	//如果不这么做，之后添加的li将绑定不了事件，因为js执行的时候lis.length已经定了
	// for(var i=0;i<lis.length;i++){
	// 	lis[i].onclick = function(){
	// 		this.style.background='red'
	// 	}
	// }
    </script>
</body>