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事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
随机推荐
- 二叉树的先序、中序以及后序遍历（递归 && 非递归）
树节点定义: class TreeNode { int val; TreeNode left; TreeNode right; TreeNode(int x) { val = x; } } 递归建立二 ...
- leetcode143- Reorder List问题
题目要求: Given a singly linked list L: L0→L1→…→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You m ...
- tomcat deploy部署项目三种方法
1.将应用文件夹或war文件直接copy到tomcat的webapps目录下,这样tomcat启动的时候会将webapps目录下的文件夹或war文件的内容当成应用部署.这种方式最简单且无须书写任何配置 ...
- Swift实战-豆瓣电台（八）播放进度与时间
视频观看地址:http://www.tudou.com/programs/view/4mEtz8S72k0/?resourceId=399000367_06_02_99 这节主要内容是NSTimer, ...
- Rest服务
资源:是网络上的一个实体,或者是网络上的一个具体信息,每一个资源对应一个特定的URI(统一资源定位符),要访问该资源,访问它的URI就可以了. 表现层:把资源的具体形式表现出来. 状态转化:每发出一个 ...
- 说说oracle分页的sql语句
说说oracle分页的sql语句,分排序和不排序两种. 当结果集不需要进行排序时,每页显示条数为:rowPerPage,当前页数为:currentPage. 1. 相对来说,这种查询速度会快一些,因为 ...
- 使用php模拟post的几种方法
<?phpfunction file_get_contents_post($url,$post){$options=array('http'=>array('method'=>'PO ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON CheckDifference
zw版[转发·台湾nvp系列Delphi例程]HALCON CheckDifference unit Unit1;interfaceuses Windows, Messages, SysUtils, ...
- install chrome in elementary os
Elementary OS Freya 0.3.2 was officially out for public. As previous release, it comes pre-installed ...
- 分享总结：更好地CodeReview
代码质量分享 2016_06_24_舒琴_代码质量.key For 代码提交人 基本原则 Review时机: 对于普通bugfix或优化,CodeReview最迟要 ...