【DOM】DOM事件中target和currentTarget

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>

【DOM】DOM事件中target和currentTarget

猜你喜欢