event.target 获取的是触发事件的标签元素
event.currentTarget 获取到的是发起事件的标签元素
一、事件属性:event.target
target事件委托的定义：本来该自己干的事，但是自己不干，交给别人来干
例子1
1 1 <!DOCTYPE html> 2 2 <html> 3 3 4 4 <head> 5 5 <meta charset="UTF-8"> 6 6 <title></title> 7 7 <style type="text/css"> 8 8 #main { 9 9 width: 200px; 1010 height: 100px; 1111 background: red; 1212 } 1313 </style> 1414 <script type="text/javascript"> 1515 window.onload = function() { 1616 document.getElementById("main").onclick = function(e) { 1717 /*这里e等于window.event也可以写成event.*/ 1818 console.log(e.target); //<div id="main" class="sb js node"><span>我爱JavaScript</span></div> 1919 console.log(e.target.id); //main 返回点击元素里存在的id属性值 2020 console.log(e.target.tagName); //DIV 2121 console.log(e.target.nodeName); //DIV 2222 console.log(e.target.classList); //输出dom类列表,没有即空 2323 console.log(e.target.className); // sb js node 2424 console.log(e.target.innerHTML); //<span>我爱JavaScript</span> 2525 console.log(e.target.innerText); //我爱JavaScript 2626 2727 console.log("----------------------------------------------------") 2828 2929 console.log(e.type); //获取事件类型：click 3030 console.log(event.pageX+":"+event.pageY); //鼠标相对于文件的左侧和顶部边缘的位置 3131 console.log(event.target); //获取发起事件的标签 3232 console.log(event.currentTarget); //获取发起事件的标签 3333 console.log(event.currentTarget.id); //获取发起事件的标签里的id属性值 3434 console.log(event.which) //针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮 常用在keydown事件中 3535 console.log(event.timeStamp); //事件触发与事件创建之间的时间间隔 3636 alert("点击了id为："+event.target.id+"的"+event.target.nodeName+"标签"); 3737 3838 // console.log(e.preventDefault()); //阻止默认事件 3939 // console.log(e.stopPropagation()); //阻止事件冒泡到父元素 4040 } 4141 } 4242 </script> 4343 </head> 4444 4545 <body> 4646 <div id="main" class="js node"><span>我爱JavaScript</span></div> 4747 </body> 4848 4949 </html>
View Code
输出如下：
tip:给网页里ID为main的div标签绑定了一个鼠标点击事件，而在实际中，在点击了这个div内的所有子标签时，都会触发这个事件，这个过程就是“冒泡”
例子中的事件传播顺序：
- 在冒泡型事件流中，是span> div > body > html > document。
- 在捕获型事件流中，是document > html > body> div > span。
例子2：一个添加删除的demo
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>一个增删demo</title> 6</head> 7<body> 8 <input type="text" id="text"> 9 <input type="button" value="添加" id="button"> 10 <ul> 11 <li>第1个<button class="btn" id="1">删除</button></li> 12 <li>第2个<button class="btn" id="2">删除</button></li> 13 <li>第3个<button class="btn" id="3">删除</button></li> 14 </ul> 15 <script> 16 var button = document.getElementById("button"); 17 var text = document.getElementById("text"); 18 var ul = document.getElementsByTagName("ul")[0]; 19 var btnClass = document.getElementsByClassName("btn"); 20 button.onclick = function(){ 21 var deleteButton = document.createElement("button"); 22 var value = text.value; 23 deleteButton.setAttribute("class","btn"); 24 var deleteText = document.createTextNode("删除"); 25 deleteButton.appendChild(deleteText); 26 var li = document.createElement("li"); 27 var liText = document.createTextNode(value); 28 li.appendChild(liText); 29 li.appendChild(deleteButton); 30 ul.appendChild(li); 31 for(var i=0;i<btnClass.length;i++){ 32 btnClass[i].onclick=function(){ 33 this.parentNode.parentNode.removeChild(this.parentNode); 34 } 35 } 36 } 37 38 for(var i=0;i<btnClass.length;i++){ 39 btnClass[i].onclick=function(){ 40 this.parentNode.parentNode.removeChild(this.parentNode); 41 } 42 } 43 </script> 44</body> 45</html>
效果如下：
二、currentTarget
event.currentTarget的作用是什么呢，我觉得他和this 的作用是差不多的，始终返回的是绑定事件的元素
例子1
1<body> 2<ul id="ul">ul 3 <li>li<a href="">a</a></li> 4 <li>li<a href="">a</a></li> 5 <li>li<a href="">a</a></li> 6 </ul> 7 <script> 8 var ul = document.getElementById("ul"); 9 ul.onclick = function(event){ 10 var tar = event.target; 11 var current = event.currentTarget; //使用target感觉也没有太大区别，具体鉴定需要多去尝试不同的demo 12 var tagName = tar.nodeName.toLowerCase(); 13 console.log(tar == this); 14 event.preventDefault(); 15 } 16 </script> 17</body>
效果
