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 ...
随机推荐
- C#中静态构造函数
静态构造函数用于初始化任何静态数据,或执行仅需执行一次的特定操作. 将在创建第一个实例或引用任何静态成员之前自动调用静态构造函数. 静态构造函数的属性 1. 静态构造函数不使用访问修饰符或不具有参数. ...
- [z]一步步教你如何在 Visual Studio 2013 上使用 Github
[z]http://www.admin10000.com/document/4004.html 介绍 我承认越是能将事情变简单的工具我越会更多地使用它.尽管我已经知道了足够的命令来使用Github,但 ...
- JAVA虚拟机是？为什么称作是“平台无关的语言”？
Java虚拟机(Java Virtual Machine)简称JVM ,它是抽象化的计算机,有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.JVM屏蔽了与具体操作系统平台相关的信 ...
- 10.24JS日记
1.函数都有返回值,人为return,返回什么就是什么,否则,他的返回值就是undefined 而方法的本质也是函数,所以也有返回值 document.getElementById()返回的是获取的标 ...
- PHP 根据两点的坐标计算之间的距离
define('PI',3.1415926535898); define('EARTH_RADIUS',6378.137); //计算范围,可以做搜索用户 function GetRange($lat ...
- C# Contains 包含空字符串的问题
一个基本的条件判断,之前没有遇到,这次遇到后,感觉真是这些年白写程序了. if(("1,2,3").Contains("")) { MessageBox.Sho ...
- 公共的service接口
package com.taotao.manager.service; import java.util.List; /** * @author Administrator * * @param &l ...
- RPG难题
/* 人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即"可乐"),经过多方打探,某资深Cole终于知道了原因,原来,LELE ...
- 用PS绘制立体字的效果教程
1. 新建一个透明画布. 2. 利用选区绘制一个圆圈 3. 利用渐变工具绘制渐变 (颜色自拟) 4. 选择混合器画笔工具按住ALT 点击填充颜色的图层 5. 新建画布填充黑色 利用混合画笔进行绘制. ...
- Python之路(第十六篇)xml模块、datetime模块
一.xml模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单, xml比较早,早期许多软件都是用xml,至今很多传统公司如金融行业的很多系统的接口还主要 ...