浅谈js与jq给新增元素动态绑定事件（事件委托）

正确效果：

先看结构

HTML

<div class="box-head"><ul class="tab"><li class="tab-active">测试<span class="iconfont"></span></li><li>测试<span class="iconfont"></span></li><li>测试<span class="iconfont"></span></li></ul><button class="tab-add">+</button></div>

一般在写这种新增元素的案例时，经常会出现新增元素无法绑定事件的情况，在我第一次写时代码是这样的

JS

 var tab = document.querySelector(".tab")var li = tab.querySelectorAll("li")var add = document.querySelector(".tab-add")for (var i = 0; i < li.length; i++) {var del = li[i].querySelector("span")del.onclick = function () {this.parentNode.remove()}}add.onclick = function () {var newLi = '<li>新增节点<span class="iconfont"></span></li>'tab.insertAdjacentHTML("beforeend", newLi)}

这样出现的效果就是无法给新增元素动态的绑定事件

在学习事件监听addEventListener后，我想着应该是在原来js的基础上，将onclick改为由del的父元素li绑定单击事件，再冒泡到子元素del去
像这样

二改JS

 var tab = document.querySelector(".tab")var li = tab.querySelectorAll("li")var add = document.querySelector(".tab-add")// 改变的是这些for (var i = 0; i < li.length; i++) {li[i].addEventListener("click", function (e) {if (e.target.nodeName.toLowerCase() == "span") {e.target.parentNode.remove()}})}add.onclick = function () {var newLi = '<li>新增节点<span class="iconfont"></span></li>'tab.insertAdjacentHTML("beforeend", newLi)}

发现还是无法给新增元素绑定删除事件
原因是在给各个li绑定前的for循环

for (var i = 0; i < li.length; i++)

这个li.length是页面一加载就运行的，相当于还是3个li
这样就一直无法追加绑定新增元素了

这里转变思路，将父元素绑定事件由 li[i] 改为只有一个的祖先元素

最终JS

 var tab = document.querySelector(".tab")var li = tab.querySelectorAll("li")var add = document.querySelector(".tab-add")// 改变的是这些tab.addEventListener("click", function (e) {if (e.target.nodeName.toLowerCase() == "span") {e.target.parentNode.remove()}})add.onclick = function () {var newLi = '<li>新增节点<span class="iconfont"></span></li>'tab.insertAdjacentHTML("beforeend", newLi)}

最后效果

所以以后遇到事件委托，最好给已经固定好的父元素绑定事件
这里要注意的是

 if (e.target.nodeName.toLowerCase() == "span") {e.target.parentNode.remove()}

里面改动的不是this.parentNode.remove()
这个指向问题需要小心

相比之下如果是jq下完成此效果就简单多了

 $(".tab-add").on("click", function () {var newLi = '<li>测试<span class="iconfont"></span></li>';$(".tab").append(newLi);})$(".tab").on("click", "span", function () {$(this).parent().remove();})

jq中on方法有点像js中的事件监听addEventlistener，但是addEventlisten没有给子元素事件委托的参数

最后总结一下
在js中给新增元素动态绑定事件是利用addEventlistener给固定不变的父元素（或祖先元素）绑定事件，再冒泡具体子元素上，这里用到的是e.target。
jq就用on方法