event.target 获取的是触发事件的标签元素
event.currentTarget 获取到的是发起事件的标签元素
一、事件属性:event.target
target事件委托的定义:本来该自己干的事,但是自己不干,交给别人来干
例子1
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 #main { 9 width: 200px; 10 height: 100px; 11 background: red; 12 } 13 </style> 14 <script type="text/javascript"> 15 window.onload = function() { 16 document.getElementById("main").onclick = function(e) { 17 /*这里e等于window.event也可以写成event.*/ 18 console.log(e.target); //<div ><span>我爱JavaScript</span></div> 19 console.log(e.target.id); //main 返回点击元素里存在的id属性值 20 console.log(e.target.tagName); //DIV 21 console.log(e.target.nodeName); //DIV 22 console.log(e.target.classList); //输出dom类列表,没有即空 23 console.log(e.target.className); // sb js node 24 console.log(e.target.innerHTML); //<span>我爱JavaScript</span> 25 console.log(e.target.innerText); //我爱JavaScript 26 27 console.log("----------------------------------------------------") 28 29 console.log(e.type); //获取事件类型:click 30 console.log(event.pageX+":"+event.pageY); //鼠标相对于文件的左侧和顶部边缘的位置 31 console.log(event.target); //获取发起事件的标签 32 console.log(event.currentTarget); //获取发起事件的标签 33 console.log(event.currentTarget.id); //获取发起事件的标签里的id属性值 34 console.log(event.which) //针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮 常用在keydown事件中 35 console.log(event.timeStamp); //事件触发与事件创建之间的时间间隔 36 alert("点击了id为:"+event.target.id+"的"+event.target.nodeName+"标签"); 37 38 // console.log(e.preventDefault()); //阻止默认事件 39 // console.log(e.stopPropagation()); //阻止事件冒泡到父元素 40 } 41 } 42 </script> 43 </head> 44 45 <body> 46 <div id="main" class="js node"><span>我爱JavaScript</span></div> 47 </body> 48 49 </html>