【DOM】DOM事件中target和currentTarget

最新推荐文章于 2023-07-06 14:59:25 发布

Chx.zhang

最新推荐文章于 2023-07-06 14:59:25 发布

阅读量742

点赞数

分类专栏： CSS/HTML/DOM 文章标签： DOM

本文链接：https://blog.csdn.net/qq_38987146/article/details/115518798

版权

CSS/HTML/DOM 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

DOM事件中target和currentTarget的概念：

target和currentTarget都是事件对象中的属性
target是指获取事件的目标，是触发事件的真实元素
currentTarget是指其事件处理程序当前正在处理事件的那个元素，是事件绑定的元素

DOM事件中this和currentTarget的关系：

在事件处理程序内部，对象this始终等于currentTarget的值。

DOM事件中target和currentTarget的关系:

相等：当事件处理程序直接绑定在目标元素上，目标元素触发事件时，e.target === e.currentTarget，e.target ===this
不相等：当事件处理程序绑定在目标元素的父节点上，目标元素触发事件时，e.currentTarget会指向绑定事件的父元素，而e.target则指向触发事件的目标元素。

验证:

<body>
  <ul id="box" style="border: 1px solid red">
      <li id="apple">苹果</li>
      <li id="banana">香蕉</li>
      <li id="peach">桃子</li>
  </ul>
</body>

<script type="text/javascript">
  var box = document.getElementById('box');
  var apple = document.getElementById('apple');
<script>

场景1: 事件绑定在子元素

<script type="text/javascript">
  /* 场景1: 事件绑定在子元素*/
  //直接绑定在目标元素apple上（如果点击apple这个li时）
  apple.onclick = function (e){  
      console.log('e.target:', e.target);               // <li id="apple">苹果</li>
      console.log('e.currentTarget:', e.currentTarget); // <li id="apple">苹果</li>
      console.log('this:',this);                        // <li id="apple">苹果</li>
      console.log(e.currentTarget===this);              // true
      console.log(e.target === e.currentTarget);        // true
      console.log(e.target === this);                   // true
  }

场景2: 事件绑定在父元素

 //绑定在父元素box上（如果点击apple这个li时）
  box.onclick = function (e){
    console.log('e.target:', e.target);               // <li id="apple">苹果</li>
    console.log('e.currentTarget:', e.currentTarget); // <ul id="box">...</ul>
    console.log('this:',this);                        // <ul id="box">...</ul>
    console.log(e.currentTarget===this);              // true
    console.log(e.target === e.currentTarget);        // false
    console.log(e.target === this);                   // false
  }

</script>

Chx.zhang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【DOM】DOM事件中target和currentTarget

DOM事件中target和currentTarget的概念：target和currentTarget都是事件对象中的属性target是指获取事件的目标，是触发事件的真实元素currentTarget是指其事件处理程序当前正在处理事件的那个元素，是事件绑定的元素DOM事件中this和currentTarget的关系：在事件处理程序内部，对象this始终等于currentTarget的值。DOM事件中target和currentTarget的关系:相等：当事件处理程序直接绑定在目标元素上
复制链接

扫一扫