zoukankan      html  css  js  c++  java
  • e.currentTarget与e.target

    e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象
     
    html中
    <div id="addBtn" v-on:click="checksBtn($event)" class="everyMes curs checkeds" title="查询">
      <Icon class="iconCommon" style="color:#80848f;" type="search"></Icon><span>查询</span> <span class="triangle"></span><Icon class="imgIcon" type="checkmark-round"></Icon>
    </div>
     
    css代码:
    .checkeds{
      border:1px solid #2d8cf0 !important;
    }
     
    js代码:
    当用e.currentTarget时
     
    methods: {
      checksBtn:function(e){
        e.currentTarget.classList.toggle("checkeds");
      }
    }
    效果:
      

         当点击查询这两个字时 作用在整个最大的id="addBtn" div上

    当用e.target时
    methods: {
      checksBtn:function(e){
        e.target.classList.toggle("checkeds");
      }
    }
     效果:

       当点击查询这两个字时 作用在子元素 span上,不会作用在最大的作用在整个最大的id="addBtn" 上

    总结:结合事件捕获和事件冒泡,e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象

     
     
     
     
     
  • 相关阅读:
    Java Spring AOP用法
    Spring IOC的简单实现
    随机数
    Java 正则表达式
    日期格式转换
    maven settings.xml详解
    JSP与Servlet的关系
    EL表达式学习
    FreeMarker学习2
    FreeMarker学习
  • 原文地址:https://www.cnblogs.com/ericLJ/p/9049963.html
Copyright © 2011-2022 走看看