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(){}匿名函数将事件包含其中 ...
随机推荐
- C# winform KeyPress 事件中对应的数字
C# winform KeyPress 事件中对应的数字所有e.KeyChar值的意思 常用ASCII码表 你自己看看应该就明白了 键盘 ASCII码 键盘 ASCII码 ESC 27 7 55 S ...
- Python中的math和保留小数位数方法
转载自 http://xukaizijian.blog.163.com/blog/static/17043311920111163272414/ math模块实现了许多对浮点数的数学运算函数. 这些 ...
- yii引入js文件
作者:zccst 四.在视图层(../views/..)添加CSS文件或JavaScript文件 Yii::app()->clientScript->registerScriptFile( ...
- go之for循环
一.基于计数器的迭代 格式 for 初始化语句; 条件语句; 修饰语句{} 实例 package main import "fmt" func main(){ for i:=0;i ...
- MessagePack 新型序列化反序列化方案
进入在学习redis的时候,在文中看到了关于MessagePack的简介,发现非常有意思,于是就花了点时间大致了解了下. MessagePack介绍: MessagePack is an effici ...
- Android第三方登陆之新浪微博Weibo篇（原生登陆授权）
前言 Android第三方登录可以说是非常的常见,今天主要先说一下新浪微博第三方登陆授权. SDK版本支持 SDK v3.0已经发布了支持iPhone和Android的版本. 须将你的应用的包名签名信 ...
- Intellij IDEA 2018.3.5版安装详解及破解
几个参考链接: 软件下载链接:https://www.jetbrains.com/idea/ 破解补丁:链接:https://pan.baidu.com/s/1xUbil5jq_DyTbXJWUUsM ...
- avaScript中变量的声明和赋值
变量是指程序中一个已经命名的存储单元,它的主要作用就是为数据操作提供存放信息的容器.变量是相对常量而言的.常量是一个不会改变的固定值,而变量的值可能会随着程序的执行而改变.变量有两个基本特征,即变量名 ...
- Burn Down Chart（2018.5.28~2018.6.3）
任务安排 (2018.6.2 更新——前端总进度) (2018.6.3 更新——后端燃尽图) 娄雨禛[前端部分] 曾子轩[后端部分+燃尽图] 前端 齐天扬+刘鼎乾:设计两组页面,只要求框架和简单的 c ...
- 九九乘法表（for循环）
九九乘法表:<br /><script>for(var i=0;i<10;i++){ for(var j=1;j<=i;j++) { var a=j*i docum ...