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')
随机推荐
- UVa 11790 - Murcia's Skyline
题目大意:给一个建筑的序列,建筑用高度和宽度描述,找出按高度的LIS和LDS,最长XX子序列的长度按照序列中建筑的宽度和进行计算. 其实就是带权的最长XX子序列问题,原来是按个数计算,每个数权都是1, ...
- 医院his系统数据库恢复
医院IT系统的重要性堪比金融行业,“银行系统宕机,老百姓不能取钱:医院HIS系统宕机,老百姓不能看病”, 医院信息系统称得上是迄今为止企业级信息系统中最复杂的一类. 某医院HIS系统SQL2008数 ...
- HUSTOJ 2796 && SPOJ1811
传送门:http://begin.lydsy.com/JudgeOnline/problem.php?id=2796 题解:后缀自动机,很裸,但是感觉对后缀自动机还不是特别理解,毕竟我太蒟蒻,等我精通 ...
- xamarin mac 之 资料
中文社区 xamarin.form 30天学习计划
- Sublime Text 3 安装 Emmet 插件
首先安装 Package Control 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴以下代码后回车安装 import urllib.r ...
- mybatis:"configuration" must match "(properties?,settings?,typeAliase.....
在运行mybatis配置文件的时候,出现错误: mybatis:"configuration" must match "(properties?,settings?,ty ...
- Hibernate懒加载的三种解决方案
Hibernate懒加载的两种解决方案: 1.Hibernate.initialize(代理对象) 2.在*.hbm.xml映射文件中添加lazy="false"属性 3.使用op ...
- bmp图片显示
文件IO项目: 在开发板屏幕上循环显示目录里的图片 a.按照一定的间隔循环显示目录里的bmp图片 b.实现手指滑动来显示目录里的图片(bmp,jpg)上一张,下一张 d1: 1.能操控屏幕(查询开发板 ...
- c#中struct和class的区别
1.struct 是值类型,class是对象类型 2.struct 不能被继承,class可以被继承 3.struct 默认的访问权限是public,而class默认的访问权限是private. 4. ...
- tomcat服务器搭建之ngrok——将内网地址映射到外网
最近心血来潮,想学习微信公众号开发.但是自己又没有外网服务器,这个给我带来很大的麻烦. 刚开始申请了新浪云服务和百度云服务,将写好的代码打包丢到相应的云服务器上就行. 但问题就来了,开发中避免不了错误 ...