vue：$event获取当前元素的节点

最新推荐文章于 2022-07-07 13:52:08 发布
原创 最新推荐文章于 2022-07-07 13:52:08 发布 · 1.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #javascript

本文介绍如何在JavaScript中利用click事件处理程序，获取并操作DOM元素，包括前一个、第一个、下一个元素，特定ID元素，属性值，父元素及子元素的HTML。适合前端开发者深入理解事件处理和DOM操作。 
<p @click = “clickfun($event)”>点击</p>
methods: {
clickfun(e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
    #获得点击元素的前一个元素
    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
  
    }
        },

 

 

vue之$event获取当前元素的节点
爱睡的虫虫
11-23 614
<p @click = “clickfun($event)”>点击</p> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.firstElementChild .
微信小程序与uni-app的不解之缘：$event的魔法之旅【含代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-18 1338
掌握了uni-app中通过$event定义事件对象的技巧，你已向成为一名小程序交互大师迈进了一大步。但记住，技术的海洋无边无际，每一次实践都是新的探索。在你的开发旅程中，是否遇到过关于$event的有趣故事，或是有着独到的使用心得？不妨在评论区分享，让我们共同织造小程序开发的智慧锦囊。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
vue 得到当前元素节点
weixin_30625691的博客
04-11 279
vue 得到当前元素节点 <div class="options" v-for="itme in items" @click="handleClick($event)">{{item}}</div> methods:{ handleClick(e){ var dom =e.target; ...
vue event.target 获取子元素_基于 Proxy 实现简易版 Vue
weixin_39958019的博客
01-20 1220
基于 Proxy 实现简易版 Vue​juejin.im分解剖析实现 new Vue() 实例化实现 {{ prop }} 绑定值实现 v-model 双向绑定值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp...
Vue数组获取下标坑
qq_42249813的博客
12-21 1万+
使用Vue 编写了基础的添加删除功能遇到了一个小坑 <div id="app"> <fieldset> <legend> Create New Person </legend> <div> <label>姓名:</label> <input v-m...
获取当前vue对象_vue.js click点击事件获取当前元素对象的操作
weixin_33595317的博客
12-29 2494
vue.js click点击事件获取当前元素对象的操作,事件,元素,对象,节点,首页vue.js click点击事件获取当前元素对象的操作易采站长站，站长之家为您整理了vue.js click点击事件获取当前元素对象的操作的相关内容。Vue.js可以传递$event对象点击当前行文本li2li3new Vue({el: '#app',data: {message: 'Hello Vue.js!'}...
Vue获取下标和内容
weixin_43387812的博客
02-20 7632
&lt;li v-for="(item,index)  in tabList" v-on:click="addClass(index,$event)" &gt;{{item.title}}&lt;/li&gt;     data() {     return {       tabList: [         { id: 0, title: "首页1" },         { id: 1...
精选资源
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
本文将详细讲解如何在Vue中使用`ref`来获取DOM元素节点以及组件内的数据和方法。 ### 一、获取DOM元素节点 在HTML模板中，给需要引用的DOM元素添加`ref`属性，如： ```html <div ref="mytitle">This is title ...
vue递归获取父元素的元素实例
10-14
在Vue.js中，有时我们需要获取元素的特定关系，如父元素、子元素或兄弟元素，以便进行DOM操作或实现特定功能。本文将详细介绍如何在Vue中递归获取父元素的元素实例，并提供相关的DOM操作方法。 首先，让我们深入...
vue.js click点击事件获取当前元素对象的操作
10-14
本文将详细介绍如何在Vue.js中利用`click`事件获取当前元素对象。 首先，让我们来看一个基本的例子： ```html <li v-on:click="say('hello!', $event)">点击当前行文本 <li>li2 <li>li3 new Vue({ el:...
$event获取当前元素
shidouyu的专栏
01-11 927
<p @click="onClick">点击获取当前元素</p> 分两种： // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素
Vue获取下拉框的选中值以及下标
GongWei_的博客
12-10 9949
<select class="select" v-on:change="indexSelect($event)" v-model="pcNum"> <option v-for="(item, index) in pcArr" :key="index" v-bind:value="item.pcNum">{{ item.pcNum }}</option> </select> js： data() { return { pcNum:'PC20200
Vue.js如何获得兄弟元素，子元素，父元素（DOM操作）
热门推荐
qq_15256443的博客
09-10 5万+
&lt;button @click = “clickfun($event)”&gt;点击&lt;/button&gt; methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.i...
Vue中获取当前元素事件的event对象用法（二）——target-当前点击元素 & currentTarget-绑定事件元素 & 获取兄弟元素、子元素、父元素
weixin_44867717的博客
07-07 1万+
vue
Vue 获取事件的 event 对象(2种方式)
前端技术
02-23 1万+
方式一：默认获取 不填写时，默认第一个参数就是 event 对象。 <template> <div> <button @click="onClick">点击</button> </div> </template> <script> export default { methods: { onClick(e) { console.log(e
Vue中currentTarget $event 的用法--获取当前父元素,子元素
tiankongxiao的博客
12-16 4540
<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementS...
Vue 中 click 事件如何传递 event
学习笔记
10-18 7316
Vue 中 click 事件如何传递 event Vue 中 click 事件如何传递 event，使用中我需要判断用户点击按钮的时候有没有按下 shift 键，我就需要拿到对应的 event 事件，获取其中的 shiftKey 属性， 在 vue 的标签中就需要写入 $event， 而不是 event <div class="btn" @click="btnPressed($event)"></btn> btnPressed(event){ console.log(event)
Vue 点击获取当前元素下标
PromiseKeeping的博客
05-08 2万+
项目开发中，固定列表是很常见的，有时候我们需要得到元素的下标去做一些事情，但是少了v-for想要获取下标就比较困难了，下面我便介绍我的方法： 其实我用的方法很简单，就是用事件委托机制去获取事件发生的元素，再获取父元素的子元素集合，再遍历子元素集合，当事件发生元素等于子元素集合中的某一个时，返回数组下标，即可得到事件发生元素的下标。 &lt;template&gt; &lt;div cl...
vue方法中获取event对象
weixin_41984072的博客
12-31 3756
前提：通过导航定位位置时，点击事件 用到a的href的hash，但需要取消a的默认动作，需要得到点击元素的event对象 html 代码 <li v-for="(item,i) in navList" :key="i" @click="navPosition(item)"> <a :class=item.className :href=item.href> <span>{{item.name}}</span>
vue中$event使用方法
最新发布
10-14
在Vue中，$event是一个特殊的变量，用于在事件处理函数中访问原生的DOM事件对象，主要在模板中的内联事件处理中使用。以下是几种常见的使用方法： ### 基本事件处理 在简单的按钮点击事件中，若要访问鼠标点击事件的原生属性，如 `clientX` 和 `clientY`（鼠标指针在浏览器可视区域中的水平和垂直坐标），可以使用 `$event`。示例代码如下： ```vue <template> <button @click="handleClick">点击我</button> </template> <script setup> const handleClick = (e) => { console.log('鼠标点击位置：', e.clientX, e.clientY); }; </script> ``` 这里的 `e` 就是 `$event` 传递过来的原生DOM事件对象，通过它可以访问事件的相关属性 [^1]。 ### 在DOM事件回调函数中获取事件对象 在DOM事件的回调函数中传入参数 `$event`，能够获取到该事件的事件对象。示例如下： ```vue <template> <button @click="getData($event)">按钮</button> </template> <script setup> const getData = (e) => { console.log(e); }; </script> ``` 在这个例子里，`e` 代表了点击按钮时的原生DOM事件对象 [^2] [^3]。 ### 获取当前元素的节点相关信息 通过 `$event` 可以获取当前点击元素的节点信息。示例如下： ```vue <template> <p @click="clickfun($event)">点击</p> </template> <script> export default { methods: { clickfun(e) { // e.target 是当前点击的元素 // e.currentTarget 是绑定事件的元素 // 获得点击元素的前一个元素 console.log(e.currentTarget.previousElementSibling); // 获得点击元素的第一个子元素 console.log(e.currentTarget.firstElementChild); // 获得点击元素的下一个元素 console.log(e.currentTarget.nextElementSibling); // 获得点击元素中id为string的元素 console.log(e.currentTarget.getElementById("string")); // 获得点击元素的string属性 console.log(e.currentTarget.getAttributeNode('string')); // 获得点击元素的父级元素 console.log(e.currentTarget.parentElement); // 获得点击元素的前一个元素的第一个子元素的HTML值 console.log(e.currentTarget.previousElementSibling.firstElementChild.innerHTML); } } } </script> ``` 在 `clickfun` 方法中，`e` 为 `$event` 传递的事件对象，通过 `e.currentTarget` 可以操作绑定事件的元素节点 [^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值