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 ...
随机推荐
- selenium模拟事件处理
执行原理: 调用ActionChains的方法时不会立即执行,会将所有的操作按顺序存放在一个队列里,当调用perform()方法时,从队列中的事件会依次执行. 支持链式写法或者是分布写法. 鼠标键盘方 ...
- 13-算法训练 P0505
算法训练 P0505 时间限制:1.0s 内存限制:256.0MB 一个整数n的阶乘可以写成n!,它表示从1到n这n个整数的乘积.阶乘的增长速度非常快,例如,13!就已经比较大了,已 ...
- node.js中npm包管理工具
现在安装node.js,默认就会帮我们装上了npm包管理工具,npm主要用来下载,安装,管理第三方模块. 创建一个包描述文件: npm init [-y] 查看包的信息 npm info <pa ...
- javascript 的原型与原型链的理解
javascript中一切皆对象,但是由于没有Class类的概念,所以就无法很好的表达对象与对象之间的关系了. 比如对象A与对象B之间,它们两个是相对独立的个体,互不干扰,对象A修改自身的属性不会影响 ...
- golang sync.Pool包的使用和一些注意地方
package main; import ( "sync" "fmt" "net" "runtime" ) //sync ...
- netcore webapi 用户 'IIS APPPOOL\无托管代码' 登录失败
配置在iis上,除了环境配置错误的原因还有一种可能是连接字符串的问题,iis要求使用sql server的sa或者其他登录用户. ps:连接字符串: "Default": &qu ...
- Oracle_高级功能(9) 性能优化
1.oracle优化器 优化目标分为4种: choose (选择性) rule (基于规则) first rows(第一行) all rows(所有行) Description:描述sql的执行计划 ...
- (转)Android学习-使用Async-Http实现图片压缩并上传功能
(转)Android学习-使用Async-Http实现图片压缩并上传功能 文章转载自:作者:RyaneLee链接:http://www.jianshu.com/p/940fc7ba39e1 让我头疼一 ...
- C++中的fstream,ifstream,oftream
https://blog.csdn.net/kingstar158/article/details/6859379 先mark一个大佬的随笔,有时间再回头看 总结: 使用ifstream和ofstre ...
- PAT 1086 就不告诉你（15 ）（代码）
1086 就不告诉你(15 分) 做作业的时候,邻座的小盆友问你:"五乘以七等于多少?"你应该不失礼貌地围笑着告诉他:"五十三."本题就要求你,对任何一对给定的 ...