js事件委托：利用事件冒泡的原理，把子元素的事件处理程序交给父元素去做，及事件委托的优缺点

KOTP17

已于 2022-03-12 13:13:28 修改

阅读量388

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-03-11 17:22:20 首次发布

本文链接：https://blog.csdn.net/qq_58517459/article/details/123429923

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

点击li标签输出li标签里面的内容

优点：1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
缺点：事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            width: 1000px;
            height: 30px;
            background-color: pink;
            list-style: none;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <ul>
        <li>这是一个li---------1</li>
        <li>这是一个li---------2</li>
        <li>这是一个li---------3</li>
        <li>这是一个li---------4</li>
        <li>这是一个li---------5</li>
        <li>这是一个li---------6</li>
    </ul>
</body>
<script>
    // event.target  是事件发生的对象
    var ul = document.getElementsByTagName("ul")[0];
    ul.onclick = function(event) {
        var event = event || window.event;
        console.log(event.target.innerHTML);
        // console.log(event.target);
    }
</script>

</html>