精华内容
下载资源
问答
  • vue2.0中,获取事件对象有三种方式: 第一种:$event关键字 <button @click="fn($event,100)">fn</button> 这里的$event是从哪里来的,非得写这个名字吗? 只需要绕道背后看看它对应生成的render函数...

    在vue2.0中,获取事件对象有三种方式:
    第一种:$event关键字

    <button @click="fn($event,100)">fn</button>
    

    这里的$event是从哪里来的,非得写这个名字吗?

    只需要绕道背后看看它对应生成的render函数是什么样子就知道了,我列出了关键代码如下

    _createElementVNode("button", {
      onClick: $event => (_ctx.f2(100,$event))
    },..)
    

    在生成render函数时,如果是函数调用格式,则自动封装一层:
    可以在:https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js中搜索关键字找到这句代码
    在这里插入图片描述
    第二种,封装函数

    当然,也可以使用如下的方式去获取事件对象

    <button @click="(e)=>{fn(e,100)}">fn</button>
    
    

    第三种,只写函数名

    当然,也可以使用如下的方式去获取事件对象

    <button @click="fn">fn</button>
    
    展开全文
  • vue事件获取当前对象

    2021-01-15 02:59:57
    事件传参如点击事件 .........methods:{click(even){//even为事件默认传参就是事件},click_1(msg,even){//有传参先接受参数最后接收事件}}二.事件属性bubbles:返回布尔值,指示事件是否是起泡事件类型。cancelable:...

    一.事件传参

    如点击事件

    .........

    methods:{

    click(even){

    //even为事件默认传参就是事件

    },

    click_1(msg,even){

    //有传参先接受参数最后接收事件

    }

    }

    二.事件属性

    bubbles:返回布尔值,指示事件是否是起泡事件类型。

    cancelable:返回布尔值,指示事件是否可拥可取消的默认动作。

    currentTarget:返回其事件监听器触发该事件的元素。

    eventPhase:返回事件传播的当前阶段。

    target:返回触发此事件的元素(事件的目标节点)。

    timeStamp:返回事件生成的日期和时间。

    type:返回当前 Event 对象表示的事件的名称。

    currentTarget:currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。

    三.其中常用的currentTarget,target

    currentTarget:返回其监听器触发事件的节点,就是你的点击事件绑定在哪一个元素上

    arget:返回事件的目标节点(触发该事件的节点),就是你当前点击的是哪一个元素

    原文:https://www.cnblogs.com/pythonywy/p/11663288.html

    展开全文
  • vue.js click点击事件获取当前元素对象的操作,事件,元素,对象,节点,首页vue.js click点击事件获取当前元素对象的操作易采站长站,站长之家为您整理了vue.js click点击事件获取当前元素对象的操作的相关内容。Vue.js...

    vue.js click点击事件获取当前元素对象的操作,事件,元素,对象,节点,首页

    vue.js click点击事件获取当前元素对象的操作

    易采站长站,站长之家为您整理了vue.js click点击事件获取当前元素对象的操作的相关内容。

    Vue.js可以传递$event对象

    • 点击当前行文本
    • li2
    • li3

    new Vue({

    el: '#app',

    data: {

    message: 'Hello Vue.js!'

    },

    methods: {

    say: function(msg, event) {

    //获取点击对象

    var el = event.currentTarget;

    alert("当前对象的内容:"+el.innerHTML);

    }

    }

    })

    属性

    描述

    bubbles

    返回布尔值,指示事件是否是起泡事件类型。

    cancelable

    返回布尔值,指示事件是否可拥可取消的默认动作。

    currentTarget

    返回其事件监听器触发该事件的元素。

    eventPhase

    返回事件传播的当前阶段。

    target

    返回触发此事件的元素(事件的目标节点)。

    timeStamp

    返回事件生成的日期和时间。

    type

    返回当前 Event 对象表示的事件的名称。

    currentTarget:currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。

    通俗一点说,就是你的点击事件绑定在哪一个元素上,currentTarget获取到的就是哪一个元素。

    target:target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

    通俗一点说,就是你当前点击的是哪一个元素,target获取到的就是哪一个元素。

    methods: {

    selectImg(event) {

    console.log(event.currentTarget);

    console.log(event.target);

    }

    }

    补充知识:vue获取当前点击对象的下标,和当前点击对象的内容

    {{item.title}}

    data里面声明:

    data() {

    return {

    tabList: [

    { id: 0, title: "首页1" },

    { id: 1, title: "首页2" },

    { id: 2, title: "首页3" }

    ],

    current:0

    };

    },

    methods: {

    addClass: function(index,event) {

    this.current = index;

    //获取点击对象

    var el = event.currentTarget;

    console.log("当前对象的内容:"+el.innerHTML);

    console.log(this.current)

    }

    以上这篇vue.js click点击事件获取当前元素对象的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持易采站长站。以上就是关于对vue.js click点击事件获取当前元素对象的操作的详细介绍。欢迎大家对vue.js click点击事件获取当前元素对象的操作内容提出宝贵意见

    展开全文
  • vue事件获取事件对象获取事件源,获取当前元素实际的一次应用代码中打印内容 1. js的事件,如点击事件,可以直接用this获取事件对象, 2. 而jQuery可以使用$(this)来获取事件对象。 3. vue必须借助事件的 event...

    vue事件获取事件对象,获取事件源,获取当前元素

         1. js的事件,如点击事件,可以直接用this获取事件对象,
         2. 而jQuery可以使用$(this)来获取事件对象。
         3. vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象
    
    v-on:click="onClick( $event)"
    
    onClick(e){
    
    $(e.currentTarget)
    
    console.log(e)
    
    # 获得点击元素的前一个元素
    e.currentTarget.previousElementSibling.innerHTML
    # 获得点击元素的第一个子元素
    e.currentTarget.firstElementChild
    # 获得点击元素的下一个元素
    e.currentTarget.nextElementSibling
    # 获得点击元素中id为string的元素
    e.currentTarget.getElementById("string")
    # 获得点击元素的string属性
    e.currentTarget.getAttributeNode('string')
    # 获得点击元素的父级元素
    e.currentTarget.parentElement
    # 获得点击元素的前一个元素的第一个子元素的HTML值
    e.currentTarget.previousElementSibling.firstElementChild.innerHTML
    }
    

    实际的一次应用

    鼠标移入 会有一个样式变化
    在这里插入图片描述

    //模板
    <template>
    <div class="nav_bar">
                      <span
                        @mouseover="mouseOver($event)"
                        @mouseleave="mouseLeave($event)"
                        v-for="(item, i) in navigationBar"
                        :key="i"
                        >{{ item }}</span
                      >
                      <!--  :class="active == true ? 'spanItem' : ''" -->
                    </div>
      </template>
    //逻辑
    data() {
        return {
          navigationBar: [
            "综合能力",
            "软件能力",
            "业务能力",
            "技能能力",
            "文化能力",
            "爱好能力",
          ],
        };
      },
     methods: {
        mouseOver(e) {
    
          console.log("e", e.currentTarget);
          console.log("e", e.target);
    
          console.log("e", e.currentTarget.innerHTML);
          e.currentTarget.className = "spanItem";
        },
        mouseLeave(e) {
          e.currentTarget.className = "";
        },
      },
    //样式
    .spanItem {
                width: 16.666%;
                height: 34px;
                text-align: center;
                line-height: 34px;
                margin-top: -3px;
                background: linear-gradient(-26deg, #56b1ff, #48fffd);
                border-radius: 20px;
                font-size: 20px;
                font-family: AliHYAiHei;
                font-weight: 400;
                font-style: italic;
                color: #ffffff;
                text-shadow: 0px 1px 3px rgba(9, 26, 41, 0.32);
              }
    

    代码中打印内容

    在这里插入图片描述

    展开全文
  • web前端:vue事件获取当前对象

    千次阅读 2020-12-29 04:15:59
    对象,是编程术语,其广义指的...事件传参如点击事件.........methods:{click(even){//even为事件默认传参就是事件},click_1(msg,even){//有传参先接受参数最后接收事件}}二.事件属性bubbles:返回布尔值,指示事件是...
  • 方式一:默认获取 不填写时,默认第一个参数就是 event 对象。 <template> <div> <button @click="onClick">点击</button> </div> </template> <script> export ...
  • 1、对某个元素进行事件触发时,比如点击事件时,想获取这个事件对象,这时候可以通过如下方式获取 <input type="button" value="测试" onclick="test()" /> function test(e){ const event = e || window....
  • vue 绑定事件获取元素对象 例如: onerror 传递一个$event methods : { imgerror : function(img) { img.target.style.display='none'; } } img.target 获取对应的元素 希望对你有所帮助
  • 在习微信小程序的时候 ,我发现其绑定在标签上的数据可以被事件对象获取 ,那么Vue 是否可以做到这一点呢 .我们来试试 <template> <div class="app"> <!--绑定数据--> <div dathello="hjy" ...
  • 1.如何进行事件绑定及传参标准写法:简写:new Vue({el:"#app",data:{ ... },methods:{处理函数(形参){//this—>当前new Vue()对象//可用this.变量名方式访问data中的变量,因为methods中的方法,也是被打散后...
  • Vue.js可以传递$event对象点击当前行文本li2li3new Vue({el: '#app',data: {message: 'Hello Vue.js!'},methods: {say: function(msg, event) {//获取点击对象var el = event.currentTarget;alert("当前对象的内容:...
  • vue获取当前点击元素的dom对象

    千次阅读 2021-01-12 04:17:02
    $event:当前触发的是什么事件$event.target:触发事件的元素对象(不一定是绑定事件对象,会因为事件冒泡...点击获取该元素对象methods:{onShow(e) {console.log(e.target)e.target //是你触发事件的元素e.currentT...
  • vue点击事件中,有许多东西需要使用javascript的语句来进行操作,例如html节点信息的获取,以及相关节点的操作等 测试点击 HTML DOM 节点在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :文档本身...
  • 使用场景:在Vue组件中点击某元素之外的地方移除该元素需求:如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们...
  • 1、在开始讲vue绑定事件之前先回顾一下原生的点击事件的写法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./assets/jquery-2.2.1.min.js"></script&...
  • vue获取当前对象

    千次阅读 2020-12-23 17:27:39
    我们给li标签绑定了一个点击事件selectImg(),传入了$event对象。(这里循环遍历了一个图片数组,是为了展示更好的效果,如有需要请自行定义数组及其对应的图片,可不要只是完全复制了代码来问我为什么报错神马的)...
  • 哈哈哈然后在vue的实例中就可以拿到对应的idb(index){this.list.splice(index,1);}或添加open(a){console.log(a.currentTarget.id)//1}补充知识:Vue中怎么动态的去插入DOM节点呢?问题描述:排除数据的插入方式,...
  • vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑?)熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有...
  • js点击获取当前元素内容 ...<div onclick="getEvent(event)">click</div> .js function getEvent(event){ ...vue点击获取当前元素内容 有时候要获取所点击元素的内容文本等信息 可以在点击事件
  • 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢?也许刚开始会有一点迷茫。唉...
  • vue实现加载并展示后台数据的tab选项卡vue用于渲染页面jquery用于方法实现动态效果{{value.date}}{{flow.name.fullName}}{{flow.name.time}}{{flow.val1}}{{flow.val2}}{{flow.val3}}var vm = new Vue({el: "#app",...
  • 模板编译 processAttrs对于ast attributes处理(v-on/@)利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称,如@[prop],prop为data中的值。不过通常都是一个静态的事件...
  • 先来看前端代码,这一行...然后给这个icon绑定了点击事件,需要获取到这一行的数据, 所以传入 item和$event的值 在函数中打印这两个值 查看控制台打印的数据 item即为这一行的数据,$event即为当前组件的数据 ...
  • Vue 事件处理方法可以用 v-on 指令监听 DOM ...v-on:click 单击事件 + + - - v-on:dblclick 双击事件 + + - - v-on:mousemove\mouseout 鼠标事件{{ x }} - {{ y }}new Vue({el:".vue-app",data:{age: 25,x:0,y:0},m...
  • 例如有如下场景先熟悉一下Vue事件处理<!-- 父组件 --><template><div><!--我们想在这个dealName的方法中传递额外参数name --><test-son v-for="item in list" @dealName="todo(item.name...
  • 仅仅传入自定义参数HTMLdddddJS代码new Vue({el:'#app'...}}})仅仅传入事件对象HTMLdddddJS代码new Vue({el:'#app',methods:{tm:function(e){console.log(e);}}})同时传入事件对象和自定义参数HTMLdddddJS代码new Vu...
  • vue click点击获取点击元素

    千次阅读 2021-01-18 19:05:14
    点击事件绑定在哪个元素,currentTarget获取的就是那一个元素。在捕获和起泡阶段,该属性是非常有用的,因为在这两个节点,它不同于target属性。 Event对象的一些兼容写法 // 获得event对象兼容性写法 event||...
  • $(target)//当前点击的dom}以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。您可能感兴趣的文章:Vue.js中兄弟组件之间互相传值实例vue....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,709
精华内容 15,483
关键字:

vue点击事件获取事件对象

vue 订阅