精华内容
下载资源
问答
  • 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢?也许刚开始会有一点迷茫。唉...

    熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢?

    也许刚开始会有一点迷茫。唉?对啊,我用vue该怎么做到(屠龙宝刀)点击就送...哦不,点击就能获取到我点击的是哪一个元素对象呢?其实很简单,vue.js,它不照样是javascript么,我们也是可以通过点击事件来传递$event事件的。

    我们来看一下javascript文档上有关event标准属性的介绍:

    属性描述

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

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

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

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

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

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

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

    先来看看第三个属性:

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

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

    再来看看第五个属性:

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

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

    可能这样说大家还是不太明白,下面我们就以vue来举一个小例子:

    模版代码:

    我们给li标签绑定了一个点击事件selectImg(),传入了$event对象。(这里循环遍历了一个图片数组,是为了展示更好的效果,如有需要请自行定义数组及其对应的图片,可不要只是完全复制了代码来问我为什么报错神马的)

    事件方法代码:

    methods: {

    selectImg(event) {

    console.log(event.currentTarget);

    console.log(event.target);

    }

    }

    模版效果图:

    同样的,为了演示效果,我们选择了两张竖直方向比较长的图片并做了左右居中的处理。(灰色边框之内都属于li标签)

    接下来我们先点击空白区域(即只点击li标签,不点击img图片):

    控制台输出:

    我们展开看一下:

    我们发现,当前点击事件下无论是currentTarget还是target获取到的都是完整的li。好像没有什么区别。

    我们再来点击中间的图片区域:

    控制台输出:

    我们发现,当前点击事件下currentTarget获取到的是完整的li,而target获取到的只有完整img标签。

    相信小伙伴们已经看出了不同之处:

    我们的事件绑定在li标签上,无论我们只点击li标签还是点击li标签下的子级img图片,currentTarget属性获取到的都是我们事件所绑定的那一个元素(即li标签),而target属性获取到的是我们点击的那一个元素。

    好啦,理解了这些之后,相信大家以后就能快速实现自己项目中获取当前点击对象的功能了,就不会再迷茫于我是用currentTarget还是target,也不会再疑惑于为什么我获取到的点击对象好像有些不太对不能满足我的需要了。

    也许还有人会问,获取当前点击对象其实没什么用唉,实际项目中更需要的是获取对象的属性。。。。。。。。。。。。。。。。好吧,既然理解了vue其实还是javascript,获取对象属性很难么😅

    getAttribute() 方法返回指定属性名的属性值。

    提示:如果您希望以 Attr 对象返回属性,请使用 getAttributeNode。

    拿好不谢。。。

    展开全文
  • 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢? 也许刚开始会有一点迷茫。...

    转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 

    熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢?

    也许刚开始会有一点迷茫。唉?对啊,我用vue该怎么做到(屠龙宝刀)点击就送...哦不,点击就能获取到我点击的是哪一个元素对象呢?其实很简单,vue.js,它不照样是javascript么,我们也是可以通过点击事件来传递$event事件的。

    我们来看一下javascript文档上有关event标准属性的介绍:

    属性描述
    bubbles 返回布尔值,指示事件是否是起泡事件类型。
    cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
    currentTarget 返回其事件监听器触发该事件的元素。
    eventPhase 返回事件传播的当前阶段。
    target 返回触发此事件的元素(事件的目标节点)。
    timeStamp 返回事件生成的日期和时间。
    type 返回当前 Event 对象表示的事件的名称。

    先来看看第三个属性:

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

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

    再来看看第五个属性:

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

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

    可能这样说大家还是不太明白,下面我们就以vue来举一个小例子:

    模版代码:

    <li v-for="img in willLoadImg" @click="selectImg($event)">
        <img class="loadimg" :src="img.url" :data-id="img.id"  alt="">
    </li>

    我们给li标签绑定了一个点击事件selectImg(),传入了$event对象。(这里循环遍历了一个图片数组,是为了展示更好的效果,如有需要请自行定义数组及其对应的图片,可不要只是完全复制了代码来问我为什么报错神马的)

    事件方法代码:

    methods: {
        selectImg(event) {
                console.log(event.currentTarget);
                console.log(event.target);
        }
    }

    模版效果图:

    同样的,为了演示效果,我们选择了两张竖直方向比较长的图片并做了左右居中的处理。(灰色边框之内都属于li标签)

    接下来我们先点击空白区域(即只点击li标签,不点击img图片):

     

     控制台输出:

    我们展开看一下:

     

     我们发现,当前点击事件下无论是currentTarget还是target获取到的都是完整的li。好像没有什么区别。

    我们再来点击中间的图片区域:

    控制台输出:

    我们发现,当前点击事件下currentTarget获取到的是完整的li,而target获取到的只有完整img标签。

     相信小伙伴们已经看出了不同之处:

    我们的事件绑定在li标签上,无论我们只点击li标签还是点击li标签下的子级img图片,currentTarget属性获取到的都是我们事件所绑定的那一个元素(即li标签),而target属性获取到的是我们点击的那一个元素。

    好啦,理解了这些之后,相信大家以后就能快速实现自己项目中获取当前点击对象的功能了,就不会再迷茫于我是用currentTarget还是target,也不会再疑惑于为什么我获取到的点击对象好像有些不太对不能满足我的需要了。

    也许还有人会问,获取当前点击对象其实没什么用唉,实际项目中更需要的是获取对象的属性。。。。。。。。。。。。。。。。好吧,既然理解了vue其实还是javascript,获取对象属性很难么?

    getAttribute() 方法返回指定属性名的属性值。
    
    提示:如果您希望以 Attr 对象返回属性,请使用 getAttributeNode。

    拿好不谢。。。

     

    转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 

     

    转载于:https://www.cnblogs.com/meng1314-shuai/p/7455575.html

    展开全文
  • )熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢?也许刚开始会有一点迷茫。唉...

    vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑?)

    熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢?

    也许刚开始会有一点迷茫。唉?对啊,我用vue该怎么做到(屠龙宝刀)点击就送…哦不,点击就能获取到我点击的是哪一个元素对象呢?其实很简单,vue.js,它不照样是javascript么,我们也是可以通过点击事件来传递$event事件的。

    我们来看一下javascript文档上有关event标准属性的介绍:

    属性 描述

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

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

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

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

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

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

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

    先来看看第三个属性:

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

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

    再来看看第五个属性:

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

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

    可能这样说大家还是不太明白,下面我们就以vue来举一个小例子:

    模版代码:

    1

    2

    3

    我们给li标签绑定了一个点击事件selectImg(),传入了$event对象。(这里循环遍历了一个图片数组,是为了展示更好的效果,如有需要请自行定义数组及其对应的图片,可不要只是完全复制了代码来问我为什么报错神马的)

    事件方法代码:

    methods: {

    selectImg(event) {

    console.log(event.currentTarget);

    console.log(event.target);

    }

    }

    1

    2

    3

    4

    5

    6

    原文发布时间:06月29日

    原文作者:孤舟听雨

    本文来源csdn如需转载请紧急联系作者

    展开全文
  • 直接访问豆瓣的所有人里,最普遍而一致的用法是围绕电影、电视、书、唱片、活动(我们叫做”条目”的东西)的评分评论、发现和讨论。我们会把和网站同步的评分评论作为一个起点和基础,在手机上重新构建围绕个人兴趣的...
  • 不过WM_PAINT确实绝了点,它要求应用程序完成元素界面的所有绘制过程,想象一下如何画出一个完整的列表控件?太烦了吧。一般来说,很少有人喜欢使用WM_PAINT,还有其它更细致的消息。 3.3.2 WM_ERASEBKGND Windows...
  • 我们把所有的属性直接赋值到了this上面,它们就像“浮在”控制器各个角落。现在,让我们通过$onInit</code> 来重写上面代码: <pre><code> javascript var myComponent = { ... ...
  • 一个DTD文档包含:元素的定义规则,元素间关系的定义规则,元素可使用的属性,可使用的实体或符号规则。 DTD文件也是一个ASCII的文本文件,后缀名为.dtd。例如:myfile.dtd。 为什么要用DTD文件呢?我的理解是它...
  • 就看了看怎么获取 <code>Issues</code> 列表。。 <pre><code>javascript https://api.github.com/repos/axuebin/react-blog/issues?creator=axuebin&labels=blog </code></pre> 通过控制参数 <code>...
  • java 面试题 总结

    2009-09-16 08:45:34
    redirect就是服务端根据逻辑,发送一个状态码,告诉浏览器重新去请求那个地址,一般来说浏览器会用刚才请求的所有参数重新请求,所以session,request参数都可以获取。 20、EJB与JAVA BEAN的区别? Java Bean 是可复用...
  • table有一个rows集合,包括了table的所有tr(包括thead和tfoot里面的)。 程序的Clone方法会根据其参数克隆对应索引的tr: this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this...
  • ctf总结.md

    2019-05-14 14:22:02
    302跳转的中转网页,burp抓包在HTTP history中找本应该访问的网站链接(为了方便寻找可以先clear一下历史),简单方法用firefox右键查看元素的查看网络中找到302跳转的网页,寻找flag(有视频) 南邮:单身一百年也没用 ...
  • react-native 之布局篇

    2021-01-10 04:06:31
    那如何获取实际像素尺寸呢? 这对图片高清化很重要,如果我图片大小为100*100 px. 设置宽度为100 * 100. 那在iphone上尺寸就是模糊。 这个时候需要图像大小应该是 100 * pixelRatio大小 ...
  •  bootcfg /scan 扫描用于 Windows 安装的所有磁盘并显示结果。  注意:这些结果被静态存储,并用于本次会话。如果在本次会话期间磁盘配置发生变化,为获得更新的扫描,必须先重新启动计算机,然后再次扫描磁盘。...
  • C#微软培训教材(高清PDF)

    千次下载 热门讨论 2009-07-30 08:51:17
    14.4 继承中关于属性的一些问题.169 14.5 小 结 .172 第四部分 深入了解 C#.174 第十五章 接 口 .174 15.1 组件编程技术 .174 15.2 接 口 定 义 .177 15.3 接口成员 .178 15.4 接口实现 .182 ...
  • C#微软培训资料

    2014-01-22 14:10:17
    14.4 继承中关于属性的一些问题.169 14.5 小 结 .172 第四部分 深入了解 C#.174 第十五章 接 口 .174 15.1 组件编程技术 .174 15.2 接 口 定 义 .177 15.3 接口成员 .178 15.4 接口实现 .182 ...
  • 并继承其父项的属性。没有单独“应用程序”对象,相反,根widget扮演着这个角色。在Flutter中,一切皆为Widget,甚至包括css样式。 <pre><code> <div class="greybox">...
  • java面试宝典

    2013-02-28 16:04:01
    94、元素有一个cascade属性,如果希望Hibernate级联保存集合中对象,casecade属性应该取什么值?(单选)(D) 22 95、以下哪些属于Session方法?(A,B,C,D,F) 22 96、Hibernate工作原理及为什么要用? 22 97、...
  • 2、编写一个程序,将d:\java目录下的所有.java文件复制到d:\jad目录下,并将原来文件的扩展名从.java改为.jad。 62 3、编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串,但要保证...
  • 千方百计笔试题大全

    2011-11-30 21:58:33
    94、元素有一个cascade属性,如果希望Hibernate级联保存集合中对象,casecade属性应该取什么值?(单选)(D) 22 95、以下哪些属于Session方法?(A,B,C,D,F) 22 96、Hibernate工作原理及为什么要用? 22 97、...
  • 下面用了一个方法将qiankun需要用到方法全部包装起来,以便后续将注册子应用放到获取后端注册表数据后执行。 /** * @name 启用qiankun微前端应用 * @param {*} list * @param {*} defaultApp */ const ...

空空如也

空空如也

1
收藏数 20
精华内容 8
关键字:

获取元素的所有属性怎么吧