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

最新推荐文章于 2024-08-18 17:41:47 发布
最新推荐文章于 2024-08-18 17:41:47 发布
阅读量1.5k 收藏 3
点赞数 2
分类专栏： vue js 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcdunf/article/details/116244979
版权
vue 同时被 2 个专栏收录
36 篇文章 0 订阅
订阅专栏
js
14 篇文章 0 订阅
订阅专栏
本文介绍如何在JavaScript中利用click事件处理程序，获取并操作DOM元素，包括前一个、第一个、下一个元素，特定ID元素，属性值，父元素及子元素的HTML。适合前端开发者深入理解事件处理和DOM操作。
摘要由CSDN通过智能技术生成 
<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
  
    }
        },

 

 

wcdunf
关注
专栏目录
vue之$event获取当前元素的节点
爱睡的虫虫
11-23 537
<p @click = “clickfun($event)”>点击</p> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.firstElementChild .
vue event.target 获取子元素_基于 Proxy 实现简易版 Vue
weixin_39958019的博客
01-20 1163
基于 Proxy 实现简易版 Vue​juejin.im分解剖析实现 new Vue() 实例化实现 {{ prop }} 绑定值实现 v-model 双向绑定值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp...
vue 得到当前元素节点
weixin_30625691的博客
04-11 248
vue 得到当前元素节点 <div class="options" v-for="itme in items" @click="handleClick($event)">{{item}}</div> methods:{ handleClick(e){ var dom =e.target; ...
vue中如何点击事件，获取该点击元素
最新发布
xiaohua0708day的博客
08-18 365
在上面的示例中，我们在`<div>`元素上添加了一个点击事件处理程序`@click="handleClick"`，当这个`<div>`元素被点击时，`handleClick`方法会被调用，并且传入一个事件对象`event`。通过`event.target`可以获取到被点击的元素。在Vue中，你可以通过事件处理程序（event handler）来监听点击事件，并通过事件对象（event object）获取点击的元素。
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 2415
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 7545
&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...
$event获取当前元素
shidouyu的专栏
01-11 869
<p @click="onClick">点击获取当前元素</p> 分两种： // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素
在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:...
【Vue】Vue中获取当前点击元素的父元素、子元素、兄弟元素。如何隐藏指定元素的父级元素？
余浩的博客
05-23 1434
Vue如何获取当前点击元素？ 获取父元素、子元素、兄弟元素呢？ 如何隐藏指定元素的父级元素？ 通过绑定点击事件： 例如： <button class="delete-btn" @click="delete($event, roomItem)">删除</button> /** * @description: 删除指定的房间 */ delete(event:any, roomItem:any) { let currentTarget = event.currentTarge
Vue获取下拉框的选中值以及下标
GongWei_的博客
12-10 9690
<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 9904
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 4479
<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementS...
Vue 中 click 事件如何传递 event
学习笔记
10-18 6903
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中$event的用法——获取当前元素及相关元素
xiecheng1995的博客
07-25 3660
<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 # 获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML # 获得点击元素的第一个子元素 e.currentTarge
el-tree获取当前点击的节点dom
06-09
可以通过以下方式获取当前点击的节点 DOM： 1. 在 el-tree 上绑定 `node-click` 事件： ```html <el-tree @node-click="handleNodeClick"></el-tree> ``` 2. 在事件处理函数中，使用 `$event` 参数获取当前点击的节点数据，然后通过 `$event.target` 获取当前点击的节点 DOM： ```javascript methods: { handleNodeClick(data, node, $event) { const nodeDom = $event.target; // do something with the node DOM } } ``` 注意，`$event.target` 返回的是当前点击节点的 HTML 元素，而不是 Vue 组件实例。如果需要对节点进行操作，可以使用原生 DOM 操作或者通过 `$refs` 获取组件实例，然后调用组件实例的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值