一. 前言

JS中内容繁多,其中渲染与事件委托是我们最常用的操作之一,接下来我就来说一下如何实现.

二. JS创建节点渲染数据

完成这个需要三步,创建标签节点,增添内容,添加父节点中

<!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>
</head>

<body>
    <ul class="list">

    </ul>
</body>
<script>
    let arr = ['这', '是', '一', '段', '文', '字']
    ul = document.querySelector('.list')
    arr.forEach((item) => {
        li = document.createElement('li')  //创建一个li标签
        li.innerHTML = `<li>${item}</li>`  //给这个标签增添内容
        ul.append(li)                      //添加至ul中
    })

</script>

</html>

效果展示:

三. JS事件委托

在 JavaScript 中，事件委托（delegate）也称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式是基于事件传播过程中，逐层冒泡总能被祖先节点捕获。

这样做的好处：优化代码，提升运行性能，真正把 HTML 和 JavaScript 分离，也能防止出现在动态添加或删除节点过程中注册的事件丢失的现象。

<!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>
</head>

<body>
    <ul>
        <li>事</li>
        <li>件</li>
        <li>委</li>
        <li>托</li>
    </ul>
</body>
<script>
    let ul = document.querySelector('ul')
    ul.onclick = function (e) {
        //  e.target  点击的目标元素
        //  e.target.tagName.toLowerCase()  事件发生的对象，即事件源
        if (e.target.tagName.toLowerCase() == 'li') {
            //删除点击的目标元素
            this.removeChild(e.target)
        }
    }
</script>

</html>

效果展示:

点击时

点击后

JS创建节点渲染数据与JS事件委托

一. 前言

二. JS创建节点渲染数据

三. JS事件委托