js中event的target和currentTarget

js中的event对象包含很多有用的信息

target：触发事件的元素。

currentTarget：事件绑定的元素。（跟this的作用差不多）。

两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了.

实际使用中target的妙用：

target事件委托的定义：本来该自己干的事，但是自己不干，交给别人来干。比如下面的例子中，应该是ul li a来监控自身的点击事件，但是li a自己不监控这个点击事件了，全部交给li父节点和a祖父节点ul来监控自己的点击事件。一般用到for循环遍历节点添加事件的时候都可以用事件委托来做，可以提高性能。

//第一个例子：

<ul id="ul">ul

</ul>

var ul=document.getElementById("ul");

ul.onclick=function(event) {

var tar=event.target;

// console.log(tar);

// console.log(this);

var current=event.currentTarget;

var tagName=tar.nodeName.toLowerCase();

console.log(tar==this);

event.preventDefault();

}

</script>

//第二个例子

<ul>

</ul>

var button=document.getElementById("button");

var text=document.getElementById("text");

var ul=document.getElementsByTagName("ul")[0];

var btnClass=document.getElementsByClassName("btn");

button.onclick=function() {

var deleteButton=document.createElement("button");

var value=text.value;

deleteButton.setAttribute("class","btn");

var deleteText=document.createTextNode("删除");

deleteButton.appendChild(deleteText);

var li=document.createElement("li");

var liText=document.createTextNode(value);

li.appendChild(liText);

li.appendChild(deleteButton);

ul.appendChild(li);

}

//给ul添加了点击事件，点击ul里面的子元素，event.target都会返回当前点击的元素节点，做一个判断，如果点击了button标签，删除这个li节点。由于添加的li都在ul节点里面，所以并不用再去添加li事件里面去写代码了，是不是很方便呢。

ul.onclick=function(event) {

var tar=event.target;

if(tar.nodeName.toLowerCase()=="button"){

tar.parentNode.parentNode.removeChild(tar.parentNode)

}