Javascript事件委托
事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
未使用事件委托之前：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test javascript</title>
<script type="text/javascript">
window.onload = function() {
var EventUtil = {
addhandler:function(element,type,handler) {
if(element.addEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on"+type] = handler;
}
}, getEvent:function(event) {
return event?event:window.event;
}, getTarget:function() {
return event.target || event.srcElement;
}, preventDefault:function() {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}, stopPropagation:function() {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBuddle = true;
}
}, removehandler:function(element,type,handler) {
if(element.removeEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.detachEvent) {
element.detachEvent("on"+type,handler);
} else {
element["on"+type] = null;
}
}
} var item1 = document.getElementById("1");
var item2 = document.getElementById("2");
var item3 = document.getElementById("3"); EventUtil.addhandler(item1,"click",function() {
alert("item1 is clicked");
}); EventUtil.addhandler(item2,"click",function() {
alert("item1 is clicked");
}); EventUtil.addhandler(item3,"click",function() {
alert("item1 is clicked");
});
}
</script>
</head>
<body>
<ul id="myLinks">
<li id="1">item1</li>
<li id="2">item2</li>
<li id="3">item3</li>
</ul>
</body>
</html>
使用事件委托后：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test javascript</title>
<script type="text/javascript">
window.onload = function() {
var EventUtil = {
addhandler:function(element,type,handler) {
if(element.addEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on"+type] = handler;
}
}, getEvent:function(event) {
return event?event:window.event;
}, getTarget:function() {
return event.target || event.srcElement;
}, preventDefault:function() {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}, stopPropagation:function() {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBuddle = true;
}
}, removehandler:function(element,type,handler) {
if(element.removeEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.detachEvent) {
element.detachEvent("on"+type,handler);
} else {
element["on"+type] = null;
}
}
} var list = document.getElementById("myLinks"); EventUtil.addhandler(list,"click",function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); switch(target.id) {
case "1":
alert("item1 is clicked");
break;
case "2":
alert("item1 is clicked");
break;
case "3":
alert("item1 is clicked");
break;
}
}); }
</script>
</head>
<body>
<ul id="myLinks">
<li id="1">item1</li>
<li id="2">item2</li>
<li id="3">item3</li>
</ul>
</body>
</html>
Javascript事件委托的更多相关文章
- JavaScript 事件委托的技术原理
如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...
- JavaScript事件委托的技术原理
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
- javascript事件委托机制详解
以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...
- JavaScript 事件委托
JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...
- 关于javaScript事件委托的那些事
今天是第一次写稿,还是有那么一丢丢小鸡冻...回归正题啦... 关于javaScript事件委托不得不说的那些事,为什么要使用事件委托? 我们可以这么说,假设老板要分配一项任务,首先要秘书叫A君来到办 ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- javascript事件委托和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- javascript 事件委托 和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
随机推荐
- redhat linux 安装mysql5.6.27
1.yum安装mysql(root身份) yum install mysql-server mysql-devel mysql -y 如没有配置yum,请参见博客:http://www.cnblogs ...
- Beyond Compare
Beyond Compare是一个比较文件和文件夹的工具. 它可以帮助你找到并协调源代码.文件夹.图像和数据间的差异,即使包括zip文档中或者FTP站点上的文件. 另外它还可以同步化文件夹并验证不 ...
- nginx字体文件配置
http://www.doucode.com/nginx-support-font/ ====== nginx location语法 基本语法:location [=|~|~*|^~] /uri/ { ...
- iOS 判断字符串中含有某个字符串 rangeOfString
//判断roadTitleLab.text 是否含有qingjoin if([roadTitleLab.text rangeOfString:@"qingjoin"].locati ...
- PostgreSQL Replication之第十章 配置Slony（3）
10.3 复制您的第一个数据库 这个小小的介绍之后,我们可以继续前进并复制我们的第一个数据库.要做到这一点,我们可以在一个数据库实例上创建两个数据库.我们想简单地在这两个数据库之间进行复制. [ 您在 ...
- JSP 使用框架frame
JSP使用框架放在<head>标签里面.如果放在<body>标签里面,用Tomcat打开,是不会显示的.
- ie6双边距解决
这个bug是ie6有名的双边距bug:同时为一个元素设置向一个方向偏移和对这个方向进行外边距设置,比如float:left,margin-left:45px;在其他浏览器下是显示正常的,在ie6下这个 ...
- Oracle Savepoint
1.目的: Use the SAVEPOINT statement to identify a point in a transaction to which you can later roll b ...
- EBS fnd_global.apps_initialize
原型:fnd_global.apps_initialize(user_ID, Responsibility_id ...
- android- Auto Monitor Logcat
启动模拟器的时候弹出窗体: 它实在询问你是否显示logcat视图以便显示此工作空间中的程序信息. 因为如何程序错误,可以从logcat中看到错误的原因,建议选择yes. 单击确定,你会发现多了一个Lo ...