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事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
随机推荐
- MVC4 数据验证、特性、自动属性总结
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 最近在做自学MVC,遇到的问题很多,索性一点点总结 ...
- 数据库调优过程（二）：找到IO不存在问题，而是sqlserver单表写入IO瓶颈
物理机上测试IO是否为瓶颈: 使用一个死循环insert into测试数据库最大写入速度: use [iTest]; declare @index int; ; begin ; INSERT into ...
- bash 截取字符串
转载自http://blog.chinaunix.net/uid-1757778-id-3162034.html 命令的2种替换形式 $()和 ``示例:截断字符串 a): #截取文件名称 ...
- JAVA-封装-静态属性
1.使用 1.static 2.用来修饰属性.方法.内部类.代码块 3.称为类属性,静态属性,类方法,静态方法 3.不需要实例化,直接用类名或静态成员名调用 2.特点 1.静态属性对于类的所有实例是共 ...
- SQL查询一个表的总记录数的方法
一.简单查询语句 1. 查看表结构 SQL>DESC emp; 2. 查询所有列 SQL>SELECT * FROM emp; 3. 查询指定列 SQL>SELECT empmo, ...
- :“boost/serialization/string.hpp”: No such file or directory 错误
主要原因是没有安装和配置boost库. 解决:http://www.programlife.net/boost-compile-and-config.html
- yii框架中应用jquery表单验证插件
效果图: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- bzoj2743 [HEOI2012]采花
做法是每个询问先算出询问区间中花的种类减去区间中只有一朵花的花的种类,这两个子问题都不算难,具体看代码吧.询问可以离线处理,用树状数组维护,复杂度O(nlogn). 不知道是想的复杂了还是打的太low ...
- CCF真题之数列分段
201509-1 数列分段 问题描述 给定一个整数数列,数列中连续相同的最长整数序列算成一段,问数列中共有多少段? 输入格式 输入的第一行包含一个整数n,表示数列中整数的个数. 第二行包含n个整数a ...
- Open quote is expected for attribute "property" associated with an element type "result".错误
java Mybatis 框架下的项目 报 Open quote is expected for attribute "property" associated with a ...