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>
View Code

相关文章:

  • 2022-12-23
  • 2020-10-09
  • 2021-09-14
  • 2022-12-23
  • 2022-12-23
  • 2021-07-11
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-30
  • 2021-07-21
相关资源
相似解决方案