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事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
随机推荐
- Make Rules
target: components ls TAB rule main:main.o mytool1.o mytool2.o gcc -o main main.o mytool1.o mytool2. ...
- Lintcode: Rotate String
Given a string and an offset, rotate string by offset. (rotate from left to right) Example Given &qu ...
- [原创]java WEB学习笔记70：Struts2 学习之路-- struts2拦截器源码分析，运行流程
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- .NET: C#: StopWatch
StopWatch class is used for calculate the timespan for that procedure. In Debug Mode it will be very ...
- windows系统调用 进程终止
#include "windows.h" #include "iostream" #include "stdio.h" using name ...
- 夺命雷公狗—angularjs—11—service的基本概念
我们先来研究下service里面的四大服务.. value 变量 constant 常量 factory 工厂模式 service 服务 <!DOCTYPE html> <ht ...
- ios学习笔记（二）第一个应用程序--Hello World
原文地址:http://blog.csdn.net/shangyuan21/article/details/18416537 上一篇文章,Windows7上使用VMWare搭建iPhone开发环境介绍 ...
- 记centos7中的network.service启动失败
查看启动失败的服务: systemctl --failed 然后就发现了一个叫network.service 的服务启动失败了. 后来找到了原因, 是因为配置文件中没有写上网卡的硬件地址 配置文件所在 ...
- 一个noconsole程序
貌似是一个外国人写的,作用应该是让控制台的程序运行的时候不会弹出那个控制台黑框.想用来让它不显示 php-cgi.exe 运行后的窗口,可是效果不是预期的. 项目在 github 的位置:https: ...
- 【海岛帝国系列赛】No.1 海岛帝国：诞辰之日
50111117海岛帝国:诞辰之日 [试题描述] YSF自从上次“被盗投降”完(带着一大堆债)回去以后,YSF对“海盗”怀念至今,他想要建立一个“药师傅”海岛帝国. 今天,他要像“管理部”那样去探寻 ...