• JavaScript tips —— target与currentTarget的区别


    定义

    以下是红宝书的描述

    属性/方法 类型 读/写 说明
    currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素
    target Element 只读 事件的目标

     

    MDN:

    currentTarget: 当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素,而不是event.target,它标识事件发生的元素。

    target:一个触发事件的对象的引用。

     

    结论

    emmmm,这说的真晦涩,不自己动手还真看不出有啥差别,先给结论吧:currentTarget指的是事件触发后,冒泡到绑定处理程序的元素,就是绑定事件处理程序的元素,target指的是触发事件的元素

    demo

    html:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3   <head>
     4     <meta charset="UTF-8">
     5     <title>currentTarget&target</title>
     6   </head>
     7   <body>
     8     <div id="div1">
     9       <div id="div2">
    10         <div id="div3">
    11           click me ~
    12         </div>
    13       </div>
    14     </div>
    15   </body>
    16 </html>

    JavaScript:

     1 let div1 = document.getElementById('div1'),
     2     div2 = document.getElementById('div2'),
     3     div3 = document.getElementById('div3');
     4 
     5 div1.addEventListener('click', (ev) => {
     6   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);
     7 });
     8 
     9 div2.addEventListener('click', (ev) => {
    10   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);
    11 });
    12 
    13 div3.addEventListener('click', (ev) => {
    14   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);
    15 });

    当单击div3时,事件依次冒泡。但是触发时间的元素为div3,所以target为div3,而从捕获阶段,到冒泡阶段途径了元素div3,div2,div1,绑定事件处理元素的依次为div3,div2,div1,所以currentTarget为div3,div2,div1。

    浏览器兼容性

    target

    在 IE6-8 中,事件模型与标准不同。使用非标准的 element.attachEvent() 方法绑定事件监听器。在该模型中,事件对象有一个 srcElement 属性,等价于target 属性。

    target = ev.target || ev.srcElement;

    currentTarget

    IE6-8中,事件模型与标准不一样,使用非标准的 element.attachEvent() 来绑定事件监听器。该模型中,没有等价于 event.currentTarget 的接口,且 this 指向全局对象。

    一种模拟 event.currentTarget 功能的方法是:将监听器包在一个函数中,然后使用 Function.prototype.call 调用这个包装函数,并将元素对象作为第一个参数。这样,this就是想要的值了。

  • 相关阅读:
    SQL多表关联原理研究实验验证
    SQL多表关联原理研究实验验证
    vs2015如何设置不显示类或函数前的引用数量
    vs2015如何设置不显示类或函数前的引用数量
    Visual Studio 中突出显示的引用
    Visual Studio 中突出显示的引用
    GridControl标题及单元格内容居中显示
    GridControl标题及单元格内容居中显示
    DevExpress的GridControl控件设置自定义显示方法
    DevExpress的GridControl控件设置自定义显示方法
  • 原文地址:https://www.cnblogs.com/nanchen/p/8335784.html
Copyright © 2020-2023  润新知