今天在学习其他人代码的时候见到了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的更多相关文章

  1. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

  2. jquery this 和 event.target 区别

    1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.t ...

  3. Javascript中event.srcElement和event.target的区别

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...

  4. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  5. event.target指向谁？

    学习中,有时遇到event.target,总是不明白为什么要用target,后来学习了下,大概了解了event.target到底指什么元素了,关于event和this的内容,下回再说: 先摆结论:ev ...

  6. js中event.target

    event.srcElement从字面上可以看出来有以下关键字:事件,源     他的意思就是:当前事件的源, 我们可以调用他的各种属性 就像:document.getElementById(&quo ...

  7. 捕获当前事件作用的对象event.target和event.srcElement

    语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

  8. js的event.srcElement与event.target（触发事件对象）

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  9. ie9及以下不兼容event.target.dataset对象

    ie9及以下不兼容event.target.dataset对象,请使用event.target.getAttribute('data-xxx')

随机推荐

  1. STM32标准IIC驱动

    IIC(Inter-Integrated Circuit)总线是一种由 PHILIPS 公司开发的两线式串行总线,用于连接 微控制器及其外围设备.也是目前很流行的通讯总线,使用IIC总线做产品能够很大 ...

  2. Windows录音API学习笔记（转）

    源:Windows录音API学习笔记 Windows录音API学习笔记 结构体和函数信息  结构体 WAVEINCAPS 该结构描述了一个波形音频输入设备的能力. typedef struct { W ...

  3. Codeforces Round 212 Div 2 报告(以前没写完，现在也没心情补了，先就这样吧）

    A. Two Semiknights Meet 题目大意:有一个8x8的棋盘,上面放有两个骑士,骑士以“田字”的方式走.每个方格都被定义为good或者bad,问骑士能否在good的格子中相遇? 由于骑 ...

  4. 内网服务器启动报错UNEXPECTED INCONSISTENCY解决方法

    一开始进入系统显示reboot and select proper boot device or insert boot media in selected boot device and press ...

  5. gridview属性

    1.列头充满:AutoSizeColumnsMode, Fill. 2.列内容居中:ColumnHeadersDefaultCellStyle, MiddleCenter. 3.行内容居中:RowsD ...

  6. java_web学习(8)会话与状态管

    HTTP简介       WEB浏览器与WEB服务器之间的一问一答的交互过程必须遵循一定的规则,这个规则就是HTTP协议.HTTP是hypertext transfer protocol(超文本传输协 ...

  7. Antx简介(ali_PPT)

    Antx的由来: §最早,我们用Makefile来build系统 •Makefile不适合Java的编译 §后来,我们用Ant来build系统 •开始时很不错 •随着项目增多,出现困难 §利用bean ...

  8. PHP做负载均衡回话保持问题参考

    最近一个项目的服务器老是出现Session数据丢失问题,导致用户莫名其妙的退出,原因是太相信我们的运维人员所谓的负载均衡会话保持的概念.会话保持 的原理就是负载均衡通过Cookie来分发那个客户连接被 ...

  9. 数据库设计的误区—>CHAR与VARCHAR

    字符型字段是数据库表中最常见的字段,而字符型字段又分为定长和变长两种.一般来说,VARCHAR类型用于存储内容长度变化较大的数据,CHAR类型用于存储内容长度没有变化或变化不大的数据. 在数据的内部存 ...

  10. ORACLE获取字符串中数字部分

    ') from dual; select regexp_replace('23456中国3-00=.,45','[^0-9]') from dual;标签:regexp_replace regexp ...