js中的event对象包含很多有用的信息
target:触发事件的元素。
currentTarget:事件绑定的元素。(跟this的作用差不多)。
两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了.
实际使用中target的妙用:
target事件委托的定义:本来该自己干的事,但是自己不干,交给别人来干。比如下面的例子中,应该是ul li a来监控自身的点击事件,但是li a自己不监控这个点击事件了,全部交给li父节点和a祖父节点ul来监控自己的点击事件。一般用到for循环遍历节点添加事件的时候都可以用事件委托来做,可以提高性能。
//第一个例子:
<ul id="ul">ul
<li>li<br><a>a</a></li>
<li>li<a>a</a></li>
</ul>
<script>
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>
//第二个例子
<input type="text" id="text">
<input type="button" value="添加" id="button">
<ul>
<li>第一个<button class="btn" id="1">删除</button></li>
</ul>
<script>
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)
}
}
</script>
//原网址:http://www.cnblogs.com/yewenxiang/p/6171411.html