Event.target和Event.currentTarget的区别
2024-08-24 05:39:30
<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一样
最新文章
- centos在线安装svn
- IE浏览器打印合格证相关问题
- Window服务初级教程以及log4net配置文件初始化
- JavaScript高级---门面模式设计
- Parse和Convert的区别
- [置顶] 通过实例学习Struts2 (1)
- IOS之【属性列表】
- visibility: hidden和 display: none的区别
- 手动的写一个structs
- JavaScript中的ASCII碼轉換成字符的兩種方法
- php数据分页显示基础
- java中equals相同,hashcode一定相同ma
- 手机端table表格bug
- Win32汇编学习(4):绘制文本
- JAVAWEB 一一 fmt标签 和日期插件
- object-c中NSString与int和float的相互转换
- C#应用视频教程3.4 Halcon+C#测试
- C# 开发(创蓝253)手机短信验证码接口
- FastReport.Net使用:[17]线(Line)控件使用
- 一行代码搞定Dubbo接口调用
热门文章
- Server2003+IIS6+TP-Link+花生壳配置
- xcode10 - 打ipa上蒲公英或者fire.im
- 使用Nginx做转发和匹配替换
- [Z]Spring Data JPA 之 一对一,一对多,多对多 关系映射
- linux强制拷贝避免输入yes方法
- python-bs4的使用
- Luogu 1341 无序字母对 - 欧拉路径
- 关于出现&ldquo;对不起,您安装的不是正版应用...&rdquo;的解决方法
- UI设计教程分享:banner设计
- dbc file