Event.target和Event.currentTarget的区别
<style>
* {
margin:0;
padding:0;
list-style:none;
}
#ul {
width:400px;
height:250px;
margin:0 auto;
} </style>
</head>
<body>
<ul id='ul' style='border:1px solid black'>UL
<li>LI<a href=''>a</a></li>
<li>LI<a href=''>a</a></li>
<li>LI<a href=''>a</a></li>
<li>LI<a href=''>a</a></li>
</ul>
<script>
var EventUtil = {
addHandler : function(element,type,handler){
if (element.addEventListener)//标准
{
element.addEventListener(type,handler,false);
}else if (element.attachEvent)//老IE
{ //handler,必须保证this指向调用的对象，因为在IE下指向window
element.attachEvent('on'+type,handler);
}else {
element['on'+type] = handler;
}
},
removeHandler : function(element,type,handler){
if (element.removeEventListener)
{
element.removeEventListener(type,handler,false);
}else if (element.detachEvent)
{
element.detachEvent('on'+type,handler);
}else {
element['on'+type] = null;
}
},
init: function(arr){
for (var i=0;i<arr.length ;i++ )
{
arr[i].style.height = 50+'px';
if (i%2 == 0)
{
arr[i].style.background = 'red';
}else {
arr[i].style.background = 'blue';
}
}
},
fn: function(event){
var bar = event.target;//返回真正的点击的元素
var tar = bar.nodeName.toLowerCase();
console.log('你点击了：'+tar);
event.preventDefault();
}
},
oUl = document.getElementById('ul'),
aLi = oUl.getElementsByTagName('li');
EventUtil.init(aLi);
EventUtil.addHandler(oUl,'click',EventUtil.fn);
</script>
</body>
target返回的是真正的点击的元素
<style>
* {
margin:0;
padding:0;
list-style:none;
}
#ul {
width:400px;
height:250px;
margin:0 auto;
} </style>
</head>
<body>
<ul id='ul' style='border:1px solid black'>UL
<li>LI<a href=''>a</a></li>
<li>LI<a href=''>a</a></li>
<li>LI<a href=''>a</a></li>
<li>LI<a href=''>a</a></li>
</ul>
<script>
var EventUtil = {
addHandler : function(element,type,handler){
if (element.addEventListener)//标准
{
element.addEventListener(type,handler,false);
}else if (element.attachEvent)//老IE
{ //handler,必须保证this指向调用的对象，因为在IE下指向window
element.attachEvent('on'+type,handler);
}else {
element['on'+type] = handler;
}
},
removeHandler : function(element,type,handler){
if (element.removeEventListener)
{
element.removeEventListener(type,handler,false);
}else if (element.detachEvent)
{
element.detachEvent('on'+type,handler);
}else {
element['on'+type] = null;
}
},
init: function(arr){
for (var i=0;i<arr.length ;i++ )
{
arr[i].style.height = 50+'px';
if (i%2 == 0)
{
arr[i].style.background = 'red';
}else {
arr[i].style.background = 'blue';
}
}
},
fn: function(event){
var bar = event.currentTarget;//返回真正的点击的元素
var tar = bar.nodeName.toLowerCase();
console.log('你点击了：'+tar);
event.preventDefault();
}
},
oUl = document.getElementById('ul'),
aLi = oUl.getElementsByTagName('li');
EventUtil.init(aLi);
EventUtil.addHandler(oUl,'click',EventUtil.fn);
</script>
</body>
返回的是绑定的事件的对象和this一样
Event.target和Event.currentTarget的区别的更多相关文章
- 【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...
- event.target 和 event.currentTarget 的区别
event.target This property of event objects is the object the event was dispatched on. It is differe ...
- e.target与e.currentTarget的区别，事件冒泡与事件捕获 ，事件委托
e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...
- event.target和event.currentTarget区别
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
- event.target和event.currentTarget的区别----0605加深理解
target:触发事件的元素.currentTarget:事件绑定的元素.两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: <ul id="ulT&qu ...
- JavaScript Event Delegation, and event.target vs. event.currentTarget
原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...
- js中event.target和event.srcElement的区别
看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...
- e.target与e.currentTarget的区别
在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询. MDN中对t ...
- 捕获当前事件作用的对象event.target和event.srcElement
语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...
随机推荐
- 662. Maximum Width of Binary Tree二叉树的最大宽度
［抄题］: Given a binary tree, write a function to get the maximum width of the given tree. The width of ...
- ubuntu下安装nginx1.11.10
(本页仅作为个人笔记参考) 为openssl,zlib,pcre配置编译 wget http://om88fxbu9.bkt.clouddn.com/package/nginx/nginx-1.11. ...
- 小程序循环多个picker选择器，实现动态增、减
现象 循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变: 问题 怎样操作才能实现只改变当前操作的下拉框的值? 思路 在js中设置一个数组变量,存储每个picker选择器默认的值:然后 ...
- centos7下的FastDFS5.09的安装与使用
FastDFS是一款开源的轻量级分布式文件系统,纯C实现,支持Linux.FreeBSD等Unix系统. 类google FS,不是通用的文件系统,只能通过专有API访问. FastDFS服务端有两种 ...
- LIS LCS 最长上升子序列 最长公共子序列 ...
最长上升子序列,问题定义:http://blog.csdn.net/chenwenshi/article/details/6027086 代码: public static void getData( ...
- 在pom.xml中引入jar包坐标的依赖范围
A依赖B,需要在A的pom.xml文件中添加B的坐标,添加坐标时需要指定依赖范围,依赖范围包括: compile:编译范围,指A在编译时依赖B,此范围为默认依赖范围.编译范围的依赖会用在编译.测试.运 ...
- python 面向对象编程 之 析构方法
析构方法:当对象在内存中被释放的时候,自动触发执行 如果产生的对象仅仅只是用户级别的, 那么无需定义__del__,如果对象还会向操作系统发生系统调用, 即一个对象有用户级别与内核级两种资源, 比如打 ...
- HTML知识基础
HTML 超文本标记语言(Hyper Text Markup Language):是一种用于创建网页的标准标记语言. Hyper Text:指具有交互功能文本. Markup Language: ...
- 快速掌握Ajax-Ajax基础实例（Ajax返回Json在Java中的实现）
(转)实例二:Ajax返回Json在Java中的实现 转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114 ...
- PHP学习笔记(二)
1.表单 PHP 的 $_GET和 $_POST用于检索表单中的值,比如用户输入. $_GET和$_POST变量分别用于收集来自 method="get" 和method=&quo ...