今天在学习其他人代码的时候见到了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. Vue.js与angular在数据实现的思考

    Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架 ...

  2. kvm 动态挂载硬盘

    根据最新需求需要动态的给kvm下的windows虚拟机挂载硬盘,网上查看了很多资料终于试通了,在这里记录下方便自己回忆,同事可以给大家做做参考,如果有问题欢迎吐槽 环境:先说说我使用的环境,环境是使用 ...

  3. win7下sublime text3 安装Emmet的pyv8

    1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.适用于 Sublime Text 3: import urllib.request,os;pf=' ...

  4. Jconsole连接远程服务器

    本地服务器.win7,安装JDK8 远程服务器:centos6.5 ,tomcat7,java8 配置方法: 1)修改远程服务器的~/tomcat/bin/catalina.sh  文件 在 # -- ...

  5. [Angular Tutorial] 6-Two-way Data Binding

    在这一步中,您将会添加一个新特性来使得您的用户可以控制电话列表中电话的顺序,动态改变顺序是由创建一个新的数据模型的特性实现的,将它和迭代器绑定在一起,并且让数据绑定神奇地处理下面的工作. ·除了搜索框 ...

  6. UVa 11129 - An antiarithmetic permutation

    题目大意:给一个正整数n,构造一个0...n-1的排列,使得这个排列的任何一个长度大于2的子序列都不为等差数列. 把序列按照奇偶位置分成两个序列,这样在两个序列间就不会形成等差数列了,然后再对这两个序 ...

  7. setTimeout,setInterval 最短触发时间

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  8. PHP根据设备类型自动跳转相应网址页面，这个现在实用

    现在移动设备上网也很方便,比如Android智能手机,iPhone/iPad等,很多网站都相继推出了针对电脑和这些手机等移动设备访问的网页,如果你的系统是用PHP写的,那面本代码对你会很实用,可根据这 ...

  9. java的WindowBuilder可视化插件

    一直做在安卓用xml作界面,对于java的控件不熟悉,也不习惯用代码做UI尤其是布局. 找了一下发现可以安装windowbuilder来实现java的可视化编程,但是很多资料里的连接都失效了. 刚自己 ...

  10. 关于网页显示乱码问题的一些个人见解（PHP、JSP...）

    最近做项目,遇到了一些网页显示乱码的情况,在网上查了很多资料都没有给一个全面的准确的答案,自己摸索了一下经过对比开发环境(我使用的是Myeclipse)编辑器的编码和浏览器默认显示的编码发现,在字符编 ...