原生JS怎么获取动态dom

发布日期: 2021-10-20

文章字数: 201

阅读时长: 1 分

<div class="container">
    <span class="content">
        JS动态内容
    </span>
</div>

在处理原生html项目的时候，我们可能会使用js appendChild添加元素

这个时候之前设置的监听就对就是动态元素无效

有以下几种方法，可以使用：

1. 使用HTML的事件属性如onclick

`<span onclick="callback" class="content">
    JS动态内容
</span>`

2. 使用事件代理(事件传播机制，冒泡、捕获)

//原生JS
let containerNode = document.getElementByClassName('.container')[0];
containerNode.addEventListener('click',function(e){
    if(e.target.className === 'content'){
            //...callback code
    }
});

//Jquey
$('.container').on('click','.content',function(e){
//...callback code
});

//Jquey 1.7以下使用
$('.container').delegate('.content','click',function(e){ 
//...callback code
});