JavaScript 事件代理绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
.out li{line-height: 25px;width: 200px; padding: 5px; border: 1px solid #ccc; margin: 10px; cursor: pointer;}
</style>
<ul class="out">
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
<li>列表04</li>
<li>列表05</li>
<li>列表06</li>
<li>列表07</li>
</ul> <script> function bindEvent(dom,event,listeners){
addEvent(dom,event,function(e){
var e=e||window.event,
src= e.target|| e.srcElement,returnVar;
while(src || src!=dom){
returnVar=listeners({
e:e,
src:src
}); if(returnVar===false){
break;
}
}
})
} function addEvent(obj,type,handle){ function createDelegate(handle,context){
return function(){
handle.apply(context,arguments);
}
}
//兼容浏览器
if(obj.addEventListener){
var handler=createDelegate(handle,obj);
obj.addEventListener(type,handler,false);
}else if(obj.attach){
var handler=createDelegate(handle,obj);
obj.attach('on'+type,handler);
}
} var ls={};
var ulDom=document.querySelector('.out');
bindEvent(ulDom,'click',function(opts){
console.log(opts.src.innerHTML);
return false; }); </script>
</body>
</html>
JavaScript 事件代理绑定的更多相关文章
- JavaScript事件代理和委托
在javasript中,代理.委托经常出现. 那么它究竟在什么样的情况下使用?它的原理又是什么? 这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中de ...
- JavaScript 事件代理
转自:http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html 如果你想给网页添加点JavaScript的交互性, ...
- JavaScript事件代理和委托（Delegation）
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理
原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...
- JavaScript事件代理入门
事件代理(Event Delegation),又称之为事件委托.是 JavaScript 中常用绑定事件的常用技巧. 顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的 ...
- JavaScript事件代理和事件委托
一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...
- javascript事件代理（委托）
之前有接触过事件代理,但是印象并不深刻.这次记下来加强印象. 用个大家比较常见的代码举例子: html dom结构: <ul id="ul1"> <li>0 ...
- javascript 事件代理及应用
事件代理又叫事件委托在前端发开中实际是非常有用的,说事件代理之前我们先说说事件绑定 <p onclick="test()" ></p> function t ...
- JavaScript事件属性绑定带参数的函数
JavaScript中在对事件进行绑定的时候,往往是element.onclick=event;这种形式,这样使用的话则会出现无法传参数.因此我们可以使用function(){}匿名函数将事件包含其中 ...
随机推荐
- 【BZOJ 2288】 生日礼物
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2288 [算法] 先将这个序列的正负数合并起来,变成一个正负交替的序列 如果新序列的正 ...
- 插入1000万条数据到mysql数据库表
转自:https://www.cnblogs.com/fanwencong/p/5765136.html 我用到的数据库为,mysql数据库5.7版本的 1.首先自己准备好数据库表 其实我在插入100 ...
- Pie(二分)
http://poj.org/problem?id=3122 题意:将n个圆柱体的不同口味的pie分给m个人,要求每个人分得的pie必须体积相同,且来自于一块pie(即:只分得一种口味的pie),求最 ...
- 【Luogu4389】付公主的背包
题目 传送门 解法 答案显然是\(n\)个形如\(\sum_{i \geq 1} x^{vi}\)的多项式的卷积 然而直接NTT的时间复杂度是\(O(nm\log n)\) 我们可以把每个多项式求\( ...
- 数组中hashCode就是内存地址，以及汉字幻化为16进制或10进制
int[] arr4={1,2,3,4,5}; System.out.println("arr4: "+arr4); System.out.println("arr4.h ...
- 微信图片不可显示java解决方法
先看知乎:https://www.zhihu.com/question/35044484 场景: 微信上传了图片素材,返回了图片url,然后不能在img标签中正常显示. 原因是微信做了图片防盗连接. ...
- 初学jQuery之jQuery虚假购物车-------与真实数据无关
初学者用jquery来写仿真的购物车,确实有点恶心,那我们今天就把这万恶的购物车剖析一下,来看看到底有什么难的. 购物车的效果图 那我们先从复选框开始吧,废话不多说,上代码!! 带有序号的,都是一些分 ...
- lua 10进制转换成其它进制table表示
-- params@num integer -- ~) 默认为10 -- NOTE:先不输出符号 function NumberToArray(num, radix) if type(num) ~= ...
- Microsoft Azure Storage Explorer
上周主管说,要把每次开过的发票,要下载成Pdf的文件,然后就实时的将这些发票存到云上面去. 就是这个Microsoft Azure ,微软的亲儿子. 先把代码贴上来吧,挺简单的. ##.链接账号密码 ...
- ★Java语法（四）——————————运算符
使用除法“/” ,要特别注意数据类型的问题.若被除数和除数都是整形,且被除数不能被除数整除时,这时输出的结果为整数,(即整形数/整形数=整形数),这是因为整形变量无法保存小数点后面的数据所致,要特别 ...