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

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

原生js 给动态添加的元素绑定事件的可能应用场景：在创建一个元素之后，需要给它绑定事件，这时候要用到事件委托。（把一个元素响应事件（click、keydown......）的函数委托到另一个元素。一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。具体可参考这里： 事件委托

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
 })

或者其他原因但是如果你用的框架导致项目加载完之后你的这些代码就已经运行了，项目就会报错，这个时候 newsUrl 为 null，解决办法：

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

以上算是笨方法，其实如果你用vue之类的框架，在mounted（保证组件元素挂载完成）生命周期里获取元素就行了。

PS: 注意区分 querySelector 和 getElementById （querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素；querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象；NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。可参考

希望本文能对您有所帮助