**看一看，瞧一瞧！**
话说要谈事件委托和target。那我们首先来看看什么是事件。话说什么是事件呢？一般的解释是比较重大、对一定的人群会产生一定影响的事情。而在JavaScript中就不是这样了，事件就是指事情发生了，然后得到有效的处理的操作。为了您能更好的明白，我们来看看以下例子，让你更清楚什么是事件哦！
1、电话铃声响起（事件发生） —需要接电话（事件处理）
2、学生举手请教问题（事件发生） —需要解答（事件处理）
3、9点半提醒大家开始上课（事件发生）—打开直播开始上课（事件处理）
4、按钮被点击了（事件发生）， —网页会反馈（事件处理）…## 明白了嘛！
当然了，我们熟知的还有鼠标事件、键盘事件、窗口事件表单事件。
事件是怎样产生的呢？
oBtn.onclick = function(ev){ var e = ev || window.event;//系统自己产生一个事件对象 alert(e); } 如何绑定事件
元素节点.on + 事件类型 = 事件处理函数;
事件对象：一旦事件出发，就会产生一个事件对象
（系统根据事件绑定自动生成的）。
【注】当点击按钮以后，系统会调用这个函数，系统会自动将事件对象，传入到函数的第一个参数。
好了看了这么久都是在为我们接下来的主题作铺垫，顺带帮大家回顾回顾哦！
接下来让我们看看什么是事件委托？
首先生活中的委托，大家很熟悉吧！
看了是不是有点豁然开朗呀！其实从身边的很多事都能表明我们时时刻刻都在接触事件委托。只是我们不习惯不擅长用代码去表示而已。
接下来让我们一起去看看代码中的委托长啥样吧！
简单的举个例吧！当我们在也页面创建‘ul’、‘li’无序列表时。我们通过获取ul并给它绑定点击事件，同时我们事件委托，委托ul的点击事件，将当前点击的li节点变成红色，找到触发对象，判断符合要求，如若符合，完成委托，把当前点击的li变为红色。
该怎样判断呢？
通过event中的target来判断是否是我们所要找的节点
//e.target就是点击的元素
var target = e.target || window.event.srcElemen //判断target是否符合要求的元素节点 if(target.tagName.toLowerCase() == "li"){}；事件委托其实就是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件。
从上面举例看来可以简单的来总结事件委托实现的步骤就是：
1、找要添加行为的节点的父节点或者祖先节点
2、将事件绑定在找到的父节点上
3、找到触发对象，判断是否符合要求，如果符合要求，进行后续操作。
window.onload = function(){ var UL = document.getElementById('ul1'); //委托ul上的点击事件，将当前点击的li节点变为红色 UL.onclick = function(ev){ var e = ev || window.event; var target = e.target || window.event.srcElement; //判断target是否符合要求的元素节点 if(target.tagName.toLowerCase() == 'li'){ //将当前点击这个li节点变成红色 target.style.backgroundColor = 'red'; } } }众所周知事件委托，最重要的功能是提高程序运行效率。如果我们想在后面继续添加li标签，让他也拥有点击li节点会变成红色的效果，应该怎样做呢？不知道吧！让我来教你！
window.onload = function(){ var UL = document.getElementById('ul1'); //委托ul上的点击事件，将当前点击的li节点变为红色 UL.onclick = function(ev){ var e = ev || window.event; var target = e.target || window.event.srcElement; //判断target是否符合要求的元素节点 if(target.tagName.toLowerCase() == 'li'){ //将当前点击这个li节点变成红色 target.style.backgroundColor = 'red'; } } var i = 6; var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ var newLi = document.createElement("li"); newLi.innerHTML = 111 * i++; oUl.appendChild(newLi); }事件委托所能带来的好处有：
1、节省资源同时减少了dom操作，提⾼性能
2、对于新添加的元素也会有之前的事件
为了提升大家对事件委托的理解和能有效的运用事件委托解决问题，特别向大家列出几个有关事件委托的案例。
惊不惊喜！意不意外！
一、表格案例
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){//获取节点 var aInputs = document.getElementsByTagName("input"); var oBtn = document.getElementById("btn1"); var oT1 = document.getElementById("t1"); //给按钮，添加点击 oBtn.onclick = function(){//获取输入框的行业列 var oCol = parseInt(aInputs[1].value); var oRow = parseInt(aInputs[0].value); //如果行和列中其中有一个不存在 if(!(oCol && oRow)){ alert("请输入行和列"); }else{ //根据行和列进行创建 //创建行 for(var i = 0; i < oRow; i++){ var oTr = document.createElement("tr"); //创建列 for(var j = 0; j < oCol; j++){ var oTd = document.createElement("td"); oTd.innerHTML = "行:" + i + ", 列:" + j; oTr.appendChild(oTd); } //最后面添加一个删除按钮 oTd = document.createElement("td"); var newBtn = document.createElement("button"); newBtn.innerHTML = "删除"; oTd.appendChild(newBtn); oTr.appendChild(oTd); oT1.appendChild(oTr); } } } //事件委托 oT1.onclick = function(ev){ var e = ev || window.event; var target = e.target || window.event.srcElement; //判断触发对象 if(target.tagName.toLowerCase() == "button" && target.innerHTML =="删除"){ oT1.removeChild( target.parentNode.parentNode); } } } </script> </head> <body> <input type