事件委托：子代委托给祖代

最新推荐文章于 2022-08-21 14:47:04 发布

Sarnwan

最新推荐文章于 2022-08-21 14:47:04 发布

阅读量65

点赞数

分类专栏： JavaScript 文章标签：事件委托动态元素内存优化冒泡机制 e.target

本文链接：https://blog.csdn.net/xuehaocyuyan/article/details/119704197

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

事件委托之处理问题

在这里插入代码片
<!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>事件委托之处理的问题</title>
</head>

<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
        <li>j</li>
    </ul>
</body>
<script>
    var li = document.querySelectorAll('li')
    // 批量添加事件监听——循环
    for (var i = 0; i < li.length; i++) {
        li[i].onclick = function () {
            // this指代当前对象
            this.style.color = 'red'
        }
    }
    // 新增元素动态绑定事件
    var new_li = document.createElement('li')
    new_li.innerHTML = 'hello'
    var ul = document.querySelector('ul')
    ul.appendChild(new_li)
    // 新增元素的事件监听在li数组里面是没有的，必须自己加上
    new_li.onclick = function () {
        new_li.style.color = 'blue'
    }
</script>

</html>

事件委托具体用法

事件委托： 1.批量添加事件监听2.动态元素节点上树不必自己添加监听
定义：用冒泡机制，将子代委托给祖代，要求这个子代就是最内层元素
属性：e.target——事件源元素 e.currentTarget——附加元素
注意事项：onmouseenter:不冒泡 onmouseover:冒泡

在这里插入代码片
<!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>事件委托——解决事件监听过多占内存的问题以及新增元素需要自己添加监听的问题</title>
</head>

<body>
    <button>点击添加li</button>
    <ul>
        <li>old</li>
        <li>old</li>
        <li><span>hello</span> old</li>
    </ul>
</body>
<script>
    var oBtn = document.querySelector('button')
    var ul = document.querySelector('ul')
    // 事件委托：将子代委托给祖代（子代是最内层）
    // e.target点击哪个就是哪个
    // onmouseover:冒泡  onmouseenter:不冒泡，e.target不管用相等于祖代
    ul.onclick = function (e) {
        e.target.style.color = 'red'
    }
    // 动态新节点
    oBtn.onclick = function () {
        var new_li = document.createElement('li')
        ul.appendChild(new_li)
        new_li.innerHTML = 'vscode'
    }
</script>

</html>