zoukankan      html  css  js  c++  java
  • 事件获取目标 currentTarget target srcElement 三者之间的区别和联系

    currentTarget   指的是触发事件的当前对象,可以是冒泡和捕获的对象,不一定是点击或者鼠标移入等事件的直接触发对象。可以是他的父元素等。

    target 指的是事件触发的直接对象。IE有兼容问题。

    srcElement 和target相同,firFox不兼容。

    获取直接目标对象的兼容写法 var target = e.target || e.srcElement    

    target 触发事件的源组件。 
    currentTarget 事件绑定的当前组件。

    如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。 
    由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以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.currenttarget  e.target是不相等的。

    总结:

    • e.target 指向触发事件监听的对象。
    • e.currentTarget 指向添加监听事件的对象。
  • 相关阅读:
    HTML和XHTML知识总结
    理解margin-left:-100%
    git clean的用法
    vue路由传参的三种基本方式
    vertical-align属性
    纯CSS制作各种图形(多图预警)
    css伪元素:before和:after用法详解
    前端注册登录的业务流程
    Vue-cli 中为单独页面设置背景图片铺满全屏的方法
    vscode 开启对 webpack alias(文件别名) 引入的智能提示
  • 原文地址:https://www.cnblogs.com/rachelch/p/9013421.html
Copyright © 2011-2022 走看看