封装Js事件代理方法
// 封装事件代理
function delegateEvent(element, tag, event, listener) {
// 判断是否支持addEventlistener
if(element.addEventListener){
// 给父元素添加事件
element.addEventListener(event,function(e){
// 获取当前触发的元素
var target = e.target;
// 判断当前元素是否是我需要的
if(target.nodeName.toLowerCase()===tag){
listener(target);
}
})
}else{
// 兼容IE
element.attachEvent("on"+event,function(){
var target = window.event.srcElement;
if(target.nodeName.toLowerCase()===tag){
listener(target);
}
})
}
}
var ul = document.getElementById("ul");
delegateEvent(ul,"li","mouseover",function(target){
target.style.backgroundColor = "red";
})
封装Js事件代理方法的更多相关文章
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS 事件代理
事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...
- js事件代理
需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385 一篇博客看懂 http://blog.csdn.net/maji ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件代理(委托)
JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...
- js事件的方法
事件的方法:onclick 鼠标单击ondblclick 鼠标双击onkeyup 按下并释放键盘上的一个键时触发 onchange 文本内容或 ...
- js事件绑定方法
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
- 关于JS事件冒泡与JS事件代理(事件委托)
连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...
- 【分享】 封装js操作textarea 方法集合(兼容很好)。
请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...
随机推荐
- beego中orm关联查询使用解析
这两天在学习beego框架,之前学习的时候遗漏了很多东西,比如orm.缓存.应用监控.模板处理等,这里将通过实例记录下如何使用beego自带的orm进行关联查询操作. 首先说明下,beego的orm有 ...
- jQuery/javascript实现简单网页计算器
<html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...
- React+BootStrap+ASP.NET MVC实现自适应和组件的复用
系统展示如下 1.前端采用bootstrap3进行架构 2.后端采用asp.net mvc进行开发 开发工具vs2010 mvc4需要安装sp1的补丁. 3.js组件的封装采用react 1.新建mv ...
- curl模拟登录
$post_data = array("username"=>"yuejide@163.com","password"=>&qu ...
- windows下codelite的使用
codelite官方打不开,从这里下载安装程序,地址:http://sourceforge.net/projects/codelite/ 在使用codelite的时候遇到的几个问题: 1).中文问 ...
- Lotus开发性能优化
之前也总结过一篇关于性能的文章,地址在http://www.cnblogs.com/carysun/archive/2008/08/09/BasicPerformance.html,今天又看到DW上又 ...
- Cocos2d中使用颜色混合:加算,减算
转自http://blog.sina.com.cn/s/blog_7a2ffd5c0100xtid.html CCSprite有一个ccBlendFunc类型的blendFunc_结构体成员,可以用来 ...
- 如何增强 Linux 系统的安全性,第一部分: Linux 安全模块(LSM)简介
http://www.ibm.com/developerworks/cn/linux/l-lsm/part1/ 1.相关背景介绍:为什么和是什么 近年来Linux系统由于其出色的性能和稳定性,开放源代 ...
- JAVA利用enum结合testng做数据驱动示例
数据驱动是做自动化测试中很重要的一部分,数据源的方案也是百花八门了,比如利用外部文件,直接在@DataProvider中写死等等,我们今天介绍一下利用enum来做数据源,先来看一下enum的写法: p ...
- Scala 深入浅出实战经典 第63讲:Scala中隐式类代码实战详解
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...