偶遇event.target
今天在学习其他人代码的时候见到了event.target.nodeName,event.target.dataset。刚开始是一头雾水,便google一下。发现大多数给出的词条都是有关jQuery事件中的target属性,半天也没有找到js中event.target到底还有哪些用法。找着找着就觉得自己怎么这么傻。。for in 一下自己找不就好了。。代码如下:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <button id="btn" class="aichihuamei">爱吃话梅</button> <script type="text/javascript"> var $ = function(id){ return document.getElementById(id); } $("btn").onclick = function(event){ for(var i in event.target){ console.log(i+"-------"+event.target[i]); } } </script> </body> </html>
点击按钮,在控制台中就可以看到event.target的很多属性和方法。我在下列的图中圈出了一些,相信这些不需要详细解释,对应上方代码就可以看出来要怎么使用(哈哈,又多了一种方法)
这次遇到的问题有两个点
一:tagName所对应的的大写;
二:dataset的使用
这是个非常神奇的东西,先看代码:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <button id="btn" data-a="a" data-b="b" data-c-d-e="cde" class="aichihuamei">爱吃话梅</button> <script type="text/javascript"> var $ = function(id){ return document.getElementById(id); } $("btn").onclick = function(event){ for(var i in event.target){ console.log(i+"-------"+event.target[i]); } console.log(event.target.dataset.a);//a console.log(event.target.dataset.b);//b console.log(event.target.dataset.cDE);//cde } </script> </body> </html>
代码修改的部分已用黄色标出,在标签中加入data-sth,当触发某个事件的时候,可以通过event.target.dataset.sth找到,注意两点,在输入时要忽略"-",除了第一个"-"后的名称,以后的名称都要大写,除了事件调用dataset,还用一种HTMLElement.dataset的用法,其他更多的理解,可以参考以下两篇文章:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset
http://blog.csdn.net/yh0205039/article/details/51003317
偶遇event.target的更多相关文章
- window.event.srcElement与window.event.target 触发事件的元素
IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...
- jquery this 和 event.target 区别
1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.t ...
- Javascript中event.srcElement和event.target的区别
event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...
- 【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...
- event.target指向谁?
学习中,有时遇到event.target,总是不明白为什么要用target,后来学习了下,大概了解了event.target到底指什么元素了,关于event和this的内容,下回再说: 先摆结论:ev ...
- js中event.target
event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源, 我们可以调用他的各种属性 就像:document.getElementById(&quo ...
- 捕获当前事件作用的对象event.target和event.srcElement
语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...
- js的event.srcElement与event.target(触发事件对象)
IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...
- ie9及以下不兼容event.target.dataset对象
ie9及以下不兼容event.target.dataset对象,请使用event.target.getAttribute('data-xxx')
随机推荐
- 单片机modebus RTU通信实现,采用C语言,可适用于单片机,VC,安卓等(转)
源:单片机modebus RTU通信实现,采用C语言,可适用于单片机,VC,安卓等 //modebus_rtu.c /***************************************** ...
- Delphi调用Android的.so文件(转)
原地址:http://zhidao.baidu.com/link?url=fzqefMM44ljXA5BnAbkX44SapCUteyzlXFvGLKvukBivm9AB-w39P_h7eX1ty-G ...
- [转] 如何让CloudStack使用KVM创建Windows实例成功识别并挂载数据盘
在使用kvm给windows虚拟机动态挂载virtio类型的硬盘时候遇到问题,通过下面的文章知道需要安装virtio驱动,从而解决问题使挂在正常,在此处mark一下 问题产生背景: 使用CloudSt ...
- Memcached源码分析之slabs.c
#include "memcached.h" #include <sys/stat.h> #include <sys/socket.h> #include ...
- tap是什么意思
分光是数据通过光纤传输:分路是数据通过网线传输.粗浅的说,Tap的概念类似于“三通”的意思,即原来的流量正常通行,同时分一股出来供监测设备分析使用. 其实这只是最简单的Tap的概念,目前的技术发展已经 ...
- 深入理解SQL的四种连接
SQL标准 select table1.column,table2.column from table1 [inner | left | right | full ] join table2 on t ...
- ReactiveCocoa学习笔记--用法
1.监测UI变量的变化 return 后把值传递下去. 1.1.输出 [self.usernameTextField.rac_textSignal subscribeNext:^(id x){ NSL ...
- java_web学习(8)会话与状态管
HTTP简介 WEB浏览器与WEB服务器之间的一问一答的交互过程必须遵循一定的规则,这个规则就是HTTP协议.HTTP是hypertext transfer protocol(超文本传输协 ...
- 对js原型对象的拓展和原型对象的重指向的区别的研究
我写了如下两段代码: function Person(){} var p1 = new Person(); Person.prototype = { constructor: Person, name ...
- iframe截取网站部分内容实现思路及代码
使用iframe可以截取网站的部分内容,主要配合width.height.overflow等属性来实现的,具体示例如下,需要的朋友不要错过. <div style="width:630 ...