浅析js中e.target和e.currentTarget的区别

最新推荐文章于 2023-11-17 20:11:58 发布

w799766

最新推荐文章于 2023-11-17 20:11:58 发布

阅读量7.8k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/w799766/article/details/89151742

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单的说，e.currentTarge是指注册了事件监听器的对象，e.target是指对象里的子对象，实际触发这个事件的对象。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>123</title>
    <style>
      #outter {
        background: blue;
        width: 200px;
        height: 200px;
      }
      #inner {
        background: red;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="outter">
      <p id=inner></p>
    </div>
    <script>
      function addEvent(obj, ev, handler){
        if(window.attachEvent){
          obj.attachEvent("on" + ev, handler);
        }else if(window.addEventListener){
          obj.addEventListener(ev, handler, false);
        }
      }
      function action(e) {
        console.log("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
      }
      addEvent(document.getElementById('outter'), "click", action);
    </script>
  </body>
</html>

1、第一次点击inner
在这里插入图片描述
2、第二次点击outter

w799766

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
浅析js中e.target和e.currentTarget的区别

简单的说，e.curretnTarge是指注册了事件监听器的对象，e.target是指对象里的子对象，实际触发这个事件的对象。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫

专栏目录