javascript之事件代理/事件委托

冰暮流星2026-05-02 23:01

事件代理与事件委托是同一个含义，它的定义是：

事件代理（Event Delegation）是一种利用事件冒泡机制的技术，通过将事件监听器绑定在父元素上，而非直接绑定在目标子元素上，从而实现对动态或大量子元素的事件管理。当子元素触发事件时，事件会冒泡到父元素，父元素通过判断事件的目标（event.target）来执行相应的逻辑。

原理：

事件代理基于DOM事件冒泡机制。当一个事件（如点击事件）在子元素上触发时，事件会从子元素向上冒泡到父元素，直至文档根节点。通过在父元素上监听事件，可以捕获所有子元素触发的事件，无需为每个子元素单独绑定监听器。

比如

html代码如下

html 复制代码

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>

假如要给每个li标签设定事件，点击之后会输出标签里的内容，比如点击li2，输出li2

通过事件代理js代码如下

javascript 复制代码

 document.querySelector("ul").onclick = function(e)
        {
            console.log(e.target.innerText)
        }

这样，不用给每个li标签设置事件，就可以实现

这样做的好处是

减少内存消耗 ：无需为大量子元素绑定独立的事件监听器，节省内存资源。
动态元素支持 ：对新添加的子元素自动生效，无需重新绑定事件。
代码简洁：统一管理事件逻辑，减少重复代码。