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(){}匿名函数将事件包含其中 ...
随机推荐
- git 设定全局ignore
创建: 2017/08/08 位置: $HOME/.config/git/ignore git/ignore 要自建 内容 https://github.com/github/gitignore ...
- sublime的ctags安装
首先,是ctags的下载.在这里:http://pan.baidu.com/s/1gdAMFab 我们用sublime几乎都会首先安装这个插件,这个插件是管理插件的功能,先安装它,再安装其他插件就方便 ...
- Django基础必备三件套: HttpResponse render redirect
1. HttpResponse : 它的作用是内部传入一个字符串参数, 然后发给浏览器 def index(request): return HttpResponse('ok') 2. render ...
- 在linux服务器centos上使用svn同步代码到项目中
一.需求 1.在多人开发过程中代码的管理以及版本的控制是一个很重要的问题,因为在开发过程中我们可能会同时更改过某个文件或者更改过多个文件, 这会导致我们很容易发生错误.所以我们需要一个方式去管理我们的 ...
- 「LOJ10150」括号配对
[题目] Hecy 又接了个新任务:BE 处理.BE 中有一类被称为 GBE. 以下是 GBE 的定义: 空表达式是 GBE 如果表达式 A 是 GBE,则 [A] 与 (A) 都是 GBE 如果 A ...
- ROS-URDF-活动关节
前言:介绍活动关节,并使机器人活动起来. 参考自:http://wiki.ros.org/urdf/Tutorials/Building%20a%20Movable%20Robot%20Model%2 ...
- Vue掉坑记
本文章汇总学习过程中掉入和不理解的坑,会持续更新,请保持关注 1.过滤器类 搜索过滤 2.修饰符 修饰符汇总 3.webpack webpack+vuecli打包路径 4.Vue后台管理框架 组件后台 ...
- 安装Windows服务，一直提示系统正在关机的错误。
错误截图如下: 问题概况: 在本机安装没问题,程序没问题. 安装到公司的测试环境就报错了!以管理员身份运行也不行. 解决方案: 1.最后发现是360安全防护中心拦截了.具体解决过程如下: 2.进入36 ...
- 三维重建7：Visual SLAM算法笔记
VSLAM研究了几十年,新的东西不是很多,三维重建的VSLAM方法可以用一篇文章总结一下. 此文是一个好的视觉SLAM综述,对视觉SLAM总结比较全面,是SLAM那本书的很好的补充.介绍了基于滤波器的 ...
- 装X数学：高雅的数学表示
采用高雅的数学描述 转自于:研究生之路怎么走? 高雅的数学描述会提高你论文的等级和加强评审人对你基础功底的认可.例如泛函分析.集合.测度.度量空间和拓扑空间.现代代数.微分几何等数学方面的 ...