码迷,mamicode.com
首页 > 其他好文 > 详细

Event对象中的target属性和currentTarget属性的区别

时间:2019-02-14 11:52:30      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:back   function   属性   info   对象   targe   javascrip   use   cli   

  先上结论:

  Event.target:触发事件的元素;

  Event.currentTarget:事件绑定的元素;

  

  通过下面的例子来理解这两个属性的区别:

  使用Event.target属性的例子:(我在<body>和<button>上都绑定了click事件)

 1 <body onclick="mouseEvent1()">
 2     <button onclick="mouseEvent2()">点我</button>
 3     <script type="text/JavaScript">
 4         function mouseEvent1() {
 5             console.log("body触发的");
 6             console.log(event.target);
 7         }        
 8         function mouseEvent2() {
 9             console.log("button触发的");
10             console.log(event.target);
11         }
12     </script>
13 </body>

  因为<button>在<body>中,所以点击<button>的同时也相当于点击了<body>(个人理解),触发<button>点击事件的同时也触发了<body>的点击事件。

  运行效果如下:

  技术图片

  我们点击<button>,返回的元素都是<button>元素。

  接下来我们把所有target换成currentTarget:

 1 <body onclick="mouseEvent1()">
 2     <button onclick="mouseEvent2()">点我</button>
 3     <script type="text/JavaScript">
 4         function mouseEvent1() {
 5             console.log("body触发的");
 6             console.log(event.currentTarget);
 7         }        
 8         function mouseEvent2() {
 9             console.log("button触发的");
10             console.log(event.currentTarget);
11         }
12     </script>
13 </body>

  运行效果如下:

  技术图片

  点击<button>,返回了<button>元素和<body>元素。

Event对象中的target属性和currentTarget属性的区别

标签:back   function   属性   info   对象   targe   javascrip   use   cli   

原文地址:https://www.cnblogs.com/cwsb/p/10373694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!