原生js javascript 给动态添加的元素绑定事件

原生js 给动态添加的元素绑定事件的可能应用场景：在创建一个元素之后，需要给它绑定事件，这时候要用到事件委托。jQuery现在很少用了，就不说了，现在来说一下原生js的写法：

let tag = `<div class="newsBox">
    <p class="newsList">Title: <span class="newsUrl" id="newsUrl">${newsTitle}</span></p>
</div>`;
let newsContainer =  document.createElement('div');
newsContainer.innerHTML = tag;
// 此时，如果想获取 #newsUrl 并给它绑定事件,一般写法：
 let newsUrl = document.getElementById('newsUrl');
 newsUrl.addEventListener('click',function(e){
     console.log(e.target);
     // do something
 })

但是如果你用的框架（比如 polymer等）导致 项目加载完之后你的这些代码就已经运行了，项目就会报错，这个时候 newsUrl 为 null，解决办法：

let tag = `<div class="newsBox">
    <p class="newsList">Title: <span class="newsUrl" id="newsUrl">${newsTitle}</span></p>
</div>`;
let newsContainer =  document.createElement('div');
newsContainer.innerHTML = tag;
 let newsUrl = newsContainer.querySelector('#newsUrl');
 // 或者 如果有多个元素
 let newsUrl = newsContainer.querySelector('.newsUrl');
 newsUrl.addEventListener('click',function(e){
    console.log(e.target);
    // do something
})

PS: 注意区分 querySelector 和 getElementById

希望本文能对您有所帮助

个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！