JS事件委托

最新推荐文章于 2024-09-16 08:47:17 发布

百香果果ccc

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量108

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wytccc/article/details/127689042

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

原理
利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有响应的事件，就到父元素上寻找并作出响应
优势
① 减少DOM操作，提高性能
② 随时可以添加子元素，添加的子元素会自动有响应的处理事件

案例：点击li变深灰色
在这里插入图片描述

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

let oUl = document.getElementById('list');
// 本应该是li的事件，这里将事件委托给父元素ul
oUl.onclick = ($event) => {
    const target = $event.target;
    // 通过触发对象来判断是否变色
    if (target.nodeName.toLowerCase() === 'li') {
        target.style.backgroundColor = 'gray';
    }
}