使用原生js为动态创建的dom元素绑定事件

最新推荐文章于 2024-05-12 09:09:50 发布

苏喂苏喂苏喂su

最新推荐文章于 2024-05-12 09:09:50 发布

阅读量6.4k

点赞数 1

分类专栏：原生JavaScript DOM

本文链接：https://blog.csdn.net/joyvonlee/article/details/93601837

版权

原生JavaScript 同时被 2 个专栏收录

59 篇文章 1 订阅

订阅专栏

DOM

11 篇文章 3 订阅

订阅专栏

为动态创建的dom元素绑定事件

直接上代码吧，也很简单。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用原生js为动态创建的元素绑定事件</title>
</head>
<body>
    <button onclick="add(this)">创建动态元素</button>

    <ul id="ul"></ul>
    <script>
        function add(e) {
            let ul = document.getElementById("ul");
            for(let i = 0; i < 10; i++) {
                let li = document.createElement("li");
                li.innerHTML = "list" + i;
                ul.appendChild(li)
            }
            e.innerHTML = "点击list中的文本改变样式";
        }

        let ul = document.getElementById("ul");
        ul.addEventListener('click', function(e) {
            let _this = e.target;
            let dom = e.target.tagName.toLowerCase();
            if(dom === 'li') {
                _this.style.color = 'red';
            }
        })
    </script>
</body>
</html>

苏喂苏喂苏喂su

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
使用原生js为动态创建的dom元素绑定事件

为动态创建的dom元素绑定事件直接上代码吧，也很简单。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
复制链接

扫一扫