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(){}匿名函数将事件包含其中 ...
随机推荐
- hdu 6082 度度熊与邪恶大魔王(2017"百度之星"程序设计大赛 - 资格赛 )
度度熊与邪恶大魔王 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Appium + python -小程序实例
from appium import webdriverfrom appium.webdriver.common.touch_action import TouchActionfrom time im ...
- Python 30 单例模式
单例模式 多次实例化的结果指向同一个实例 单例模式实现方式 import settings #方式一: class MySQL: __instance=None def __init__(self,i ...
- JAVA 中进行网络通信时，通信的程序两端要传输的对象，不仅要序列化，而且这个对象所属的类的名字要完全一样，连包的名字都得一样
如上图项目目录,这是一个简易的QQ,客户端登录的时候要传输用户信息到服务器验证,所以两端都会用到User类的对象,但一开始我在Server端的包名是com.qq.server.common,两端的报名 ...
- PHP开发笔记（三）关于PHP伪静态的问题总结
Apache 第一个问题就是关于PHPStudy集成Apache环境下5.5版本以上”No input file specified“问题. 针对TP5框架,以下是.htaccess文件的配置,PHP ...
- Java_Web之宠物管理系统
使用JSP+servLet实现宠物管理系统,oraC1e11g作为后台数据厍,实现查看宠物和增加宠物的功能由你实现,如图: 其中宠物包栝:狗.猫.鸟.鼠 具体要求及推荐实现步骤 第一步:创建数据库代码 ...
- .Net并行计算支持嵌套事务的方法
问题背景 一年前,我们开始利用.Net 4.0的TPL(Task Parallel Library)并行计算技术对复杂计算的功能节点进行性能优化,这些复杂计算往往会包含大量对数据库的操作.在应用TPL ...
- dubbo之结果缓存
结果缓存,用于加速热门数据的访问速度,Dubbo提供声明式缓存,以减少用户加缓存的工作量. lru 基于最近最少使用原则删除多余缓存,保持最热的数据被缓存. threadlocal 当前线程缓存,比如 ...
- 蛮好用的局域网测试工具iperf
公司局域网总是莫名其妙的和一台机器网速很慢,虽然无法解决也无人解决,但是能有个有效的测试至少也会心里有数. 咱干不了网络硬件布线的活,就测测网速吧. 网上找了下,开始有文章介绍NetIQ Chario ...
- 【sqli-labs】 less40 GET -Blind based -String -Stacked(GET型基于盲注的堆叠查询字符型注入)
提交,页面正常,说明是')闭合的 http://192.168.136.128/sqli-labs-master/Less-40/?id=1')%23 http://192.168.136.128/s ...