// 封装事件代理

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事件代理方法的更多相关文章

  1. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  2. JS 事件代理

    事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...

  3. js事件代理

    需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385 一篇博客看懂  http://blog.csdn.net/maji ...

  4. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  5. js事件代理(委托)

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...

  6. js事件的方法

    事件的方法:onclick         鼠标单击ondblclick       鼠标双击onkeyup         按下并释放键盘上的一个键时触发 onchange        文本内容或 ...

  7. js事件绑定方法

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  8. 关于JS事件冒泡与JS事件代理(事件委托)

    连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...

  9. 【分享】 封装js操作textarea 方法集合(兼容很好)。

    请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下.         在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...

随机推荐

  1. js高仿QQ消息列表左滑功能

    该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...

  2. 互信息(Mutual Information)

    本文根据以下参考资料进行整理: 1.维基百科:https://zh.wikipedia.org/wiki/%E4%BA%92%E4%BF%A1%E6%81%AF 2.新浪博客:http://blog. ...

  3. UHF桌面式发卡器

    UHF桌面式发卡器: http://www.rr-rfid.com/index.php/pro_view/95  本文用菊子曰发布

  4. 用Java实现约瑟夫环

    约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个人又出列;依此规律重 ...

  5. 软件包管理 之 RPM 基础 《RPM 的介绍和应用》

    RPM 是 Red Hat Package Manager 的缩写,本意是Red Hat 软件包管理,顾名思义是Red Hat 贡献出来的软件包管理:在Fedora .Redhat.Mandriva. ...

  6. OsmocomBB 编译安装

    工具: sudo apt-get install libtool shtool autoconf git-core pkg-config make gcc gnuarm: ## 32 bit wget ...

  7. LeetCode: Path Sum II 解题报告

    Path Sum II Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals ...

  8. dede教程之后台登录是自动跳出解决方法

    有时也不知道什么原因,登录后台时输入全部正确点确认按钮时却会自动跳出.必须输入http://你的域名/dede/login.php才可以登录.通过尝试最终解决了问题,下面分享出来: 1.打开根目录da ...

  9. openssl 学习之从证书中提取RSA公钥N 和 E

    原文链接: http://blog.csdn.net/kkxgx/article/details/19850509 通常数字证书包含很多信息,其中N和E值即我们称为的公钥.如何从PEM 或者DER格式 ...

  10. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...