• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • event.currentTarget

    在事件冒泡过程中的当前DOM元素。

    event.currentTarget

    这个属性总是等于函数的this

    如果您使用jQuery.proxy或另一种形式操作作用域,this将等于您所提供的context(上下文),而不是event.currentTarget

    例子

    currentTarget匹配this关键字。

    <ul>
    <li>first</li>
    <li>second</li>
    <li><p>P标签A</p></li>
    <li>B</li>
    </ul>
    <p>冒泡事件</p>
    
    
    <script>
    $("p").click(function(event) 
    {
      alert( event.currentTarget === this ); // true
    }); 
    <script>
    
    • first
    • second
    • P标签A

    • B

    冒泡事件

    target与currentTarget的区别

    在页面中点击一个元素,时间是从这个元素的根元素逐层传递下来的,这个事件称为事件的捕获阶段,当事件传递到这个元素后,又会把事件逐层传递回去,知道祖先元素,这个阶段是事件的冒泡阶段。

    组件不同

    • target:触发事件的源组件(事件注册/绑定所在组件)
    • currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),此时点击子元还是父元素,都是当前事件,应用e.currentTarget)。

    取值不同

    • 如果绑定的事件所在组件没有子元素,则用e.target===e.currentTarget一样;
    • 如果事件绑定在父元素中,且该父元素有子元素,当用e.currentTarget时,不管点击父元素所在区域还是子元素(当前事件),都正确执行,若用e.target时,点击父元素所在区域无错,点击子元素区域,执行报错-------》报错的原因是事件没绑定在子元素上,是在父元素上,子元素要用e.currentTarget才正确!

    上篇:event.target

    下篇:event.relatedTarget