e.target与e.currentTarget的区别

Posted speace

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了e.target与e.currentTarget的区别相关的知识,希望对你有一定的参考价值。

原文摘自:https://www.jianshu.com/p/1dd668ccc97a

不必记什么时候e.currentTargete.target相等,什么时候不等,理解两者的究竟指向的是谁即可。

  • e.target 指向触发事件监听的对象。
  • e.currentTarget 指向添加监听事件的对象。

MDN中对target的解释为,一个触发事件的对象的引用, 当事件处理程序在事件的冒泡或捕获阶段被调用时。
而对于currentTarget,它指的是当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素,而不是event.target,它标识事件发生的元素。
举个例子来说明。

事件冒泡阶段

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
    <li>hello 4</li>
  </ul>
  <script>
    let ul = document.querySelectorAll(‘ul‘)[0]
    let aLi = document.querySelectorAll(‘li‘)
    ul.addEventListener(‘click‘,function(e){
       let oLi1 = e.target  
       let oLi2 = e.currentTarget
        console.log(oLi1)   //  被点击的li
        console.log(oLi2)   // ul
        console.og(oLi1===oLi2)  // false
    })
  </script>
</body>
</html>

  

我们知道,e.target可以用来实现事件委托,该原理是通过事件冒泡(或者事件捕获)给父元素添加事件监听,e.target指向引发触发事件的元素,如上述的例子中,e.target指向用户点击的li,由于事件冒泡,li的点击事件冒泡到了ul上,通过给ul添加监听事件而达到了给每一个li添加监听事件的效果,而e.currentTarget指向的是给绑定事件监听的那个对象,即ul,从这里可以发现,e.currentTarget===this返回true,而e.target===this返回falsee.currenttargete.target是不相等的。

注意,在jQuery提供的on方法中,e.currentTarget与该方法接收的第二个参数有关,根据jQuery的文档描述

如果省略selector或者是null,那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时,就会执行处理程序,不管它直接绑定在元素上,还是从后代(内部)元素冒泡到该元素的
当提供selector参数时,事件处理程序是指为委派事件(事件委托或事件代理)。事件不会在直接绑定的元素上触发,但当selector参数选择器匹配到后代(内部元素)的时候,事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如,由最内层元素到最外层元素)开始冒泡,并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器,那么这些元素上的事件也会被触发。

<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    li{
      padding: 5px;
      border: 1px solid red;
    }
    span{
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
  </ul>
  <script>
    let ul = document.querySelectorAll(‘ul‘)[0]
    let aLi = document.querySelectorAll(‘li‘)
    $(‘ul‘).on(‘click‘,‘li‘,function(e){
 
        console.log(e.target)   //  被点击的元素
        console.log(e.currentTarget)   //  li   
        console.log(e.currentTarget === this)  // true
    })
  </script>
</body>
</html>

  

当li中含有子元素的时候,e.target指的是触发事件的元素,可能是span也可能是li,此时的e.currentTarget指的是selector那个参数,也就是本例中的li。如果省略selector参数,那么它和addEventListener中e.target和e.currentTarget是一致的。



作者:plainnany
链接:https://www.jianshu.com/p/1dd668ccc97a
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。








以上是关于e.target与e.currentTarget的区别的主要内容,如果未能解决你的问题,请参考以下文章

小程序中e.target与e.currentTarget区别详解

e.target与e.currentTarget的作用

e.target 和 e.currentTarget 之间的区别

vue_cli中ref+e.target+e.currentTarget的区别

e.target和e.currentTarget

小程序--e.target和e.currentTarget区别